datatables callback on pagination

Question

I'm implementing switchery into datatable in this way

UPDATE

  var table = $('#table').DataTable({
        pageLength: 25,
        responsive: true,
        deferRender: true,
        stateSave: false,
        info: false,
        ordering: false,
        dom: 'lTfgt<"float-left"i>p',
        ajax: {
            "url": "../src/routes.php",
            "type": "POST",
            "async":true,
            "dataType": "json",
            "data": function(d) {
                d.call = "data-vol";
                d.dataform = $('#filtroForm').serialize();
                d.market = JSON.stringify($('#jstree_topmarket').jstree("get_selected"));

                return d;
            }
        },
        language: {
            "url": "assets/js/plugins/dataTables/it_IT.txt"
        },
        "fnDrawCallback": function() {
            var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

            elems.forEach(function(html) {
                var switchery = new Switchery(html, { size: 'small' });
            });
        }
    });

and seems ok

but when I switch to page 2 and then come back to page 1, I have this result

EDIT

Replacing fnDrawCallback with initComplete seems not working

andrewJames · Accepted Answer · 2021-03-04 17:04:00Z

1

I would recommend using an initComplete function instead of drawCallback. This will avoid the problem you are seeing where you get new sliders added every time there is another draw event in your DataTable.

To access the checkbox nodes from initComplete you can use this:

"initComplete": function() {
  var allNodes = $('#example').DataTable().cells().nodes();
  $.each($( '.js-switch', allNodes), function(index, node) {
    var switchery = new Switchery(node, { size: 'small' });
  });   
}

The first line of the function uses the Datatables API to access every node in the table.

allNodes is a collection of <td> nodes - so then we have to select only those which contain a child node which uses your js-switch class.

Since we already have jQuery, I chose to use its iterator $.each() to iterate over al these checkbox nodes, to create the switchery object.

Update:

Here is the full DataTable I am using to test with:

$('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "", defaultContent: '<input type="checkbox" class="js-switch" checked />' }
  ],
  "initComplete": function() {
    var allNodes = $('#example').DataTable().cells().nodes();
    $.each($( '.js-switch', allNodes), function(index, node) {
      var switchery = new Switchery(node, { size: 'small' });
    }); 
  }

} );

My test data is in a JavaScript variable:

var dataSet = [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },

    // more data not shown here...

    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ];

edited Mar 4, 2021 at 17:04

answered Mar 4, 2021 at 14:57

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

andrewJames Over a year ago

In my test, I am using checkboxes like this: <input type="checkbox" class="js-switch" checked />. They are placed in the related DataTable <td></td> cells. Can you describe what you mean by "not working"? What do you see? Are errors thrown in the browser's console? Do you still get multiple sliders in each cell?

andrewJames Over a year ago

Note that my DataTable is called "example" - yours may have a different name, as defined in the HTML table: <table id="example"...>...</table>`. You may need to change my code, accordingly.

FireFoxII Over a year ago

I have also updated my first post with full code of datatable... Is it possibile the problem is the ajax call?

andrewJames Over a year ago

Did you change my example code to match your table name? Your table is called "table", whereas my table is called "example": var allNodes = $('#table').DataTable().cells().nodes();

andrewJames Over a year ago

OK - thank you for the notes. I do not know why your use of my code is behaving differently from my use of my code - very strange.

|

Antón Casais Mera · Accepted Answer · 2021-07-29 08:18:48Z

0

I use createdRow, this is my code:

createdRow: function (row) {
    initializeSwitchElement(row)
}


function initializeSwitchElement(row) {
    let checkbox = Array.prototype.slice.call($(row).find('.js-switch'));
    if ($(checkbox).prop('checked')) {
        $(checkbox).trigger('keyup').blur()
    }
    checkbox.forEach(function (element) {
        new Switchery(element, { size: 'small' });
    });
}

answered Jul 29, 2021 at 8:18

Antón Casais Mera

1

Collectives™ on Stack Overflow

datatables callback on pagination

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related