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.
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_fixed_header").DataTable({"fixedHeader":{"header":true},"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-semibold">'+ status[index]['title']+'</span>';},"targets":1}]});
Fixed Header
FixedHeader provides the ability to perform this action with DataTables tables. It operates by detaching the header and footer
elements from the host table and attaching them to the top or bottom of the screen as required by the scrolling position of the window
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_fixed_header").DataTable({"fixedHeader":{"header":true,"headerOffset":5},"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.
var groupColumn =2;var table =$("#kt_datatable_row_grouping").DataTable({"columnDefs":[{"visible":false,"targets": groupColumn
}],"order":[[groupColumn,"asc"]],"displayLength":25,"drawCallback":function(settings){var api =this.api();var rows = api.rows({page:"current"}).nodes();var last =null;
api.column(groupColumn,{page:"current"}).data().each(function(group, i){if(last !== group){$(rows).eq(i).before("<tr class=\"group fs-5 fw-bolder\"><td colspan=\"5\">"+ group +"</td></tr>");
last = group;}});}});// Order by the grouping$("#kt_datatable_row_grouping tbody").on("click","tr.group",function(){var currentOrder = table.order()[0];if(currentOrder[0]=== groupColumn && currentOrder[1]==="asc"){
table.order([groupColumn,"desc"]).draw();}else{
table.order([groupColumn,"asc"]).draw();}});
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.
$("#kt_datatable_footer_callback").DataTable({"footerCallback":function(row, data, start, end, display){var api =this.api(),
data;// Remove the formatting to get integer data for summationvarintVal=function(i){returntypeof i ==="string"?
i.replace(/[\$,]/g,"")*1:typeof i ==="number"?i:0;};// Total over all pagesvar total = api
.column(4).data().reduce(function(a, b){returnintVal(a)+intVal(b);},0);// Total over this pagevar pageTotal = api
.column(4,{page:"current"}).data().reduce(function(a, b){returnintVal(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 positioning documentation.
$("#kt_datatable_responsive_2").DataTable({responsive:{details:{type:"column",target:-1}},columnDefs:[{className:"dtr-control dtr-control-last",orderable:false,targets:-1},{// 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}]});
Select
This example shows an ability to enable and configure rows Select API for DataTables.