$('#example').DataTable({
paging: true, // Enable pagination
lengthChange: true, // Allow users to change the number of rows displayed per page
pageLength: 10, // Set the default number of rows displayed per page
lengthMenu: [10, 25, 50, 100], // Specify the options for the number of rows displayed per page
searching: true, // Enable the search functionality
ordering: true, // Enable column ordering
order: [[0, 'asc']], // Set the initial column ordering (column index, order)
info: true, // Show table information (number of rows, pages, etc.)
autoWidth: true, // Automatically adjust the width of the columns
scrollX: false, // Enable horizontal scrolling
scrollY: false, // Enable vertical scrolling
fixedHeader: true, // Fix the header to the top of the viewport
responsive: true, // Enable responsive behavior
stateSave: true, // Save the state of the table (sorting, search, pagination)
processing: true, // Show a processing indicator when the table is busy
language: {
search: "Filter:", // Customize the search input label
emptyTable: "No data available in table", // Customize the empty table message
info: "Showing _START_ to _END_ of _TOTAL_ entries", // Customize the table information element
},
ajax: {
url: '/path/to/your/data', // The URL where the data should be fetched
dataSrc: '' // The property in the returned data where the table data is stored
},
columns: [
{data: 'column1', title: 'Column 1'}, // Set the data and title for a column
{data: 'column2', title: 'Column 2'},
{
data: 'column3',
title: 'Column 3',
searchable: false, // Disable searching for a specific column
orderable: false, // Disable ordering for a specific column
visible: false, // Hide a specific column
width: '10%' // Set the width for a specific column
},
{
data: 'column4',
title: 'Column 4',
render: function (data, type, row) {
if (type === 'display') {
return '<strong>' + data + '</strong>'; // Customize the display of the data
}
return data;
}
}
],
createdRow: function (row, data, index) {
if (data.column1 === 'Special Value') {
$(row).addClass('highlight'); // Add a class to a row based on the data
}
}
});
Comments