Search

$(document).ready(function() { var table = $('#example').DataTable( { select: true, stateSave: true, //ajax: '/api/staff', rowId: 'id', columnDefs: [ {

$(document).ready(function() { var table = $('#example').DataTable( { select: true, stateSave: true, //ajax: '/api/staff', rowId: 'id', columnDefs: [ {

// Add event listener for opening and closing details $('#example tbody').on('click', 'td.dt-control', function () { var tr = $(this).closest('tr'); var row = table.row( tr );

$(document).ready(function() { var table = $('#example').DataTable( { select: true, stateSave: true, ajax: '/api/staff', rowId: 'staffId', columnDefs: [ {

You have the jQuery ajax request in line 16 that looks to be populating the table. Plus you have the ajax option in the Datatables config that is using the same HTML table. You will want to remove …

$(document).ready(function() { var table = $('#example').DataTable( { select: true, stateSave: true, ajax: '/api/staff', rowId: 'staffId', columnDefs: [ {

//Imports import TableConfig from './components/DataTables/TableConfig'; //Document Ready Function $(function() { var table = $('#example').DataTable( { responsive: TableConfig.responsive,

$('#example').on('textarea mouseup', function () { const dt = $('#example').DataTable(); dt.table().columns.adjust(); });

var config = { columnDefs: [], }; const breakPointConfiguration = { 'dt-hide-desktop': (w) => w > 1024, 'dt-hide-tablet-l': (w) => 768 < w && w

// import "../../styles/table.module.css"; export default function index() { if (typeof window === "object") { // console.log(document.querySelector("#example").Da

Looks like you need to make your jQuery selector more specific and only select the first .dataTables_scrollBody in the #example_wrapper div, like this:

$('#example_wrapper .dataTables_scrollBody').css("height",height+"px").css("max-height",height+"px");

function () { var table = $('#example').DataTable({ dom: 'tir' }); var table2 = $('#example2').DataTable({ dom: 'tir' }); // Event listener to the two range filtering inputs to

There are still errors with the test case. Is #example11 supposed to be the main table or the child table?

window.addEventListener("DOMContentLoaded", function () { // Setup - add a text input to each footer cell document.querySelectorAll("#example tfoot th").forEach((el) =>

$(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $(this).text(); $(this).html( '' ); }

need it write to $("#example thead tr:eq(1) th"). Could please help here.

var table = $('#example').DataTable({

var select = $("#example thead tr:eq(1) th").eq(column( idx )).find('select');

var select = { style: 'os', selector: 'td:not(:last-child)' }; $('#example').DataTable({ select: select });