Datatables checkboxes start with some checkboxes checked

Question

Can someone help me setup the Checkboxes extension for Datatables to start with some some checkboxes checked? The documentation on this matter can be found here, and although I've done everything that's required, it still fails to do what's supposed to do.

Basically I'm passing an array of the IDs that I want to be checked upon pageload, and I'm checking the ID of each row to check if it's contained in the array, but still all rows start unchecked.

jQuery(function($) {

  $('#questions-pool').DataTable({
    ordering: false,
    dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
    lengthMenu: [
      [10, 50, 100, -1],
      [10, 50, 100, 'All']
    ],
    initComplete: function(settings) {
      var api = this.api();
      var selected = [387, 386, 385, 384, 383, 382, 381, 380, 379, 378];
      alert(selected);

      api.cells(
        api.rows(function(idx, data, node) {
          alert(data[2]);
          return (selected.indexOf(data[2]) >= 0) ? true : false;
        }).indexes(),
        0
      ).checkboxes.select();
    },
    columnDefs: [{
      targets: 2,
      checkboxes: {
        selectAllPages: false,
      }
    }],
  });

});

You can find a working fiddle here. Everything is working fine, except for the desired rows selection at startup.

Any help will be greatly appreciated. I'm struggling with this for 2 days already...

Your fiddle causes my chrome-window to show popups with numbers `387,386,385,384,383,382,381,380,379,378` and a lot more with single numbers counting down. Do you have some alert-call in it? — MrJalapeno, Jun 22 '22 at 10:55
@MrJalapeno yup, sorry, there are 30 alerts of the IDs that are being drawn `alert(data[2]);` — Faye D., Jun 22 '22 at 11:47
@MrJalapeno the initial array of IDs are the ones I want to set their checkboxes set upon initial page load, and the single IDs being alerted are the IDs of each row being drawn at that moment. It's there for debugging purposes only to check whether `return (selected.indexOf(data[2]) >= 0) ? true : false;` should return true or false for each row. So at least true/false is returned correctly, but the value isn't reflected in the checkboxes... — Faye D., Jun 22 '22 at 11:52
Did so, the alert'less version is here https://jsfiddle.net/princeofabyss/k5cfapzL/3/ — Faye D., Jun 22 '22 at 11:52
@MrJalapeno there is this fiddle https://jsfiddle.net/gyrocode/6o41bvgg/ from the creator of the extension that does exactly what I want to achieve, and I forked it here https://jsfiddle.net/princeofabyss/bkyox80a/1/ and modified it appropriately to work with a similar array of desired IDs that I want to be checked, and it works just fine. I suspect the problem has to do with the datasource of the datable,where in the case of the example is AJAX, and in my case is DOM... — Faye D., Jun 22 '22 at 12:05

score 1 · Accepted Answer · answered Jun 22 '22 at 12:24

1

So there were two issues (and bare with me since I don't even know jQuery nor any of the packages you were using).

The first is that the selected-list contain numbers while the data from the DOM your comparing to contain strings. Which means that they will never match.

The second thing was this piece:

    columnDefs: [{
      targets: 2,
      checkboxes: {
        selectAllPages: false,
      }
    }],

I changed it to

    'columnDefs': [
      {
        'targets': 0,
        'checkboxes': {
          'selectRow': true
        }
      }
    ],

because that's what the working example you passed used, and... I have no idea why but now it works, here's a working jsfiddle :)

https://jsfiddle.net/2y5hx1a4/12/

EDIT: Oh and a tip, it's way easier (imo) to debug using console.log("what you want to check") than alert :P

answered Jun 22 '22 at 12:24

MrJalapeno

1,532
3
18
37

1

Your answer helped me figure out one part of what was wrong... `api.cells( api.rows(function(idx, data, node) { //alert(data[2]); return (selected.indexOf(data[2]) >= 0) ? true : false; }).indexes(), 0 ).checkboxes.select();` should be changed to `api.cells( api.rows(function(idx, data, node) { //alert(data[2]); return (selected.indexOf(data[2]) >= 0) ? true : false; }).indexes(), 2 ).checkboxes.select();` as in my case, the checkboxes column is the 3rd one (so index 2) – Faye D. Jun 22 '22 at 12:30
The other part is indeed the array containing numbers instead of strings. But that's something I can't control easily, as it's being passed like that from PHP... How could I implement a loose comparison where type wouldn't be taken into consideration? – Faye D. Jun 22 '22 at 12:32
You could convert one of the types while making the comparison, i.e. `selected.indexOf(Number(data[2]))` or `selected.map(number => String(number)).indexOf(Number(data[2]))` – MrJalapeno Jun 22 '22 at 12:34
Another tip is to use `selected.includes(Number(data[2]))` instead of indexOf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes – MrJalapeno Jun 22 '22 at 12:37
1

`includes()` isn't supported by IE though, that's why I used the good, old `indexOf`! I just checked it in my working environment, not the jsfiddle I mean, and indeed changing index 0 to 2 did the trick! `Number()` wasn't even necessary in the comparison! – Faye D. Jun 22 '22 at 12:41
1

You're such a gem MrJalapeno! I can't thank you enough for your help!!!!! – Faye D. Jun 22 '22 at 12:42
1

I'm really happy I could help you out! Wishing you all the best with this project =D – MrJalapeno Jun 22 '22 at 12:43
if you could take a look at this https://stackoverflow.com/questions/72722463/datatables-checkboxes-extension-combined-with-sortable I'd be really grateful. – Faye D. Jun 22 '22 at 22:01

Datatables checkboxes start with some checkboxes checked

1 Answers1