Column Rendering
This example show badges rendered next to the position content dynamically. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.
<table id="kt_datatable_example_1" class="table table-striped table-row-bordered gy-5 gs-7">
<thead>
<tr class="fw-bold fs-6 text-gray-800">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>var status = {
1: {"title": "Pending", "state": "primary"},
2: {"title": "Delivered", "state": "danger"},
3: {"title": "Canceled", "state": "primary"},
4: {"title": "Success", "state": "success"},
5: {"title": "Info", "state": "info"},
6: {"title": "Danger", "state": "danger"},
7: {"title": "Warning", "state": "warning"},
};
$("#kt_datatable_example_1").DataTable({
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
var index = KTUtil.getRandomInt(1, 7);
return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-bold">' + status[index]['title'] + '</span>';
},
"targets": 1
}
]
});Complex Header
This example shows multiple layers of heading rows. This technique can be useful for large scale data types that requires a single title heading to be split into multiple columns for better data readability.
<table id="kt_datatable_example_2" class="table table-striped table-row-bordered gy-5 gs-7 border rounded w-100">
<thead>
<tr class="fw-bolder fs-6 text-gray-800 px-7">
<th rowspan="2" class="align-middle border-bottom border-end w-200px">Name</th>
<th colspan="2" class="border-bottom">HR Information</th>
<th colspan="3" class="border-bottom">Contact</th>
</tr>
<tr class="fw-bolder fs-6 text-gray-800 px-7">
<th class="ps-2">Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>$("#kt_datatable_example_2").DataTable({
"columnDefs": [{
"visible": false,
"targets": -1
}]
});Row Grouping
In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden).
<table id="kt_datatable_example_3" class="table table-striped table-row-bordered gy-5 gs-7 border rounded w-100">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>Footer Callback
This example shows the datatable footer dynamically calculating the sum of a specified column. This technique can be useful for summing up columns for balance sheets or financial data.
| First name | Last name | Position | Office | Salary |
|---|---|---|---|---|
| Airi | Satou | Accountant | Tokyo | $162,700 |
| Angelica | Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
| Ashton | Cox | Junior Technical Author | San Francisco | $86,000 |
| Bradley | Greer | Software Engineer | London | $132,000 |
| Brenden | Wagner | Software Engineer | San Francisco | $206,850 |
| Brielle | Williamson | Integration Specialist | New York | $372,000 |
| Bruno | Nash | Software Engineer | London | $163,500 |
| Caesar | Vance | Pre-Sales Support | New York | $106,450 |
| Cara | Stevens | Sales Assistant | New York | $145,600 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| Total: | $3008160 ( $14371710 total) | |||
Showing 1 to 10 of 57 records
<table id="kt_datatable_example_4" class="table table-striped table-row-bordered gy-5 gs-7 border rounded">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$170,750</td>
</tr>
</tbody>
<tfoot>
<tr class="fw-bolder fs-6">
<th colspan="3" class="text-nowrap align-end">Total:</th>
<th colspan="2" class="text-danger fs-3"></th>
</tr>
</tfoot>
</table>$("#kt_datatable_example_4").DataTable({
"footerCallback": function(row, data, start, end, display) {
var api = this.api(),
data;
// Remove the formatting to get integer data for summation
var intVal = function(i) {
return typeof i === "string" ?
i.replace(/[\$,]/g, "") * 1 :
typeof i === "number" ?
i : 0;
};
// Total over all pages
var total = api
.column(4)
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
var pageTotal = api
.column(4, {
page: "current"
})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(4).footer()).html(
"$" + pageTotal + " ( $" + total + " total)"
);
}
});DOM Positioning
When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. For more info please check
DOM positioningdocumentation.
<table id="kt_datatable_example_5" class="table table-striped table-row-bordered gy-5 gs-7 border rounded">
<thead>
<tr class="fw-bolder fs-6 text-gray-800 px-7">
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>$("#kt_datatable_example_5").DataTable({
"language": {
"lengthMenu": "Show _MENU_",
},
"dom":
"<'row'" +
"<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
"<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
">" +
"<'table-responsive'tr>" +
"<'row'" +
"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
">"
});
2025©
Md Abdul Momin
