gyrocode / jquery-datatables-checkboxes Goto Github PK

Hello,
Firstly thanks for this great plugin, very flexible and is definitely capable of a lot.
I am running into a problem where selecting the checkboxes is returning incorrect indices.

My JSON is below

{
   "data": [
      {
            "context": "Domain used by banjori",
            "date": "1472581968",
            "guid": "av2t2k450k0japgcnt3g",
            "indicator": "aidamachuslazaroqok.com",
            "source": "bambenekconsulting",
            "type": "domain"
        },
        {
            "context": "none",
            "date": "1472579384",
            "guid": "av2see450k0i0eahrdt0",
            "indicator": "92.222.217.123",
            "source": "Emerging Threats Compromised IPs",
            "type": "ip"
        },
        {
            "context": "none",
            "date": "1472579384",
            "guid": "av2see450k0i0eahrdtg",
            "indicator": "unocl45trpuoefft.hynwbs.top",
            "source": "SANS ISC Medium",
            "type": "domain"
        },
        {
            "context": "none",
            "date": "1472579384",
            "guid": "av2see450k0i0eahrdug",
            "indicator": "92.222.90.176",
            "source": "Emerging Threats Compromised IPs",
            "type": "ip"
        },
        {
            "context": "none",
            "date": "1472579384",
            "guid": "av2see450k0i0eahrdv0",
            "indicator": "52uo5k3t73ypjije.4n592s.top",
            "source": "SANS ISC Medium",
            "type": "domain"
        },
        {
            "context": "none",
            "date": "1472579384",
            "guid": "av2see450k0i0eahre0g",
            "indicator": "unocl45trpuoefft.y721yz.top",
            "source": "SANS ISC Medium",
            "type": "domain"
        },
        {
            "context": "none",
            "date": "1472581973",
            "guid": "av2t2lc50k0japgcpoc0",
            "indicator": "97.89.241.0",
            "source": "Emerging Threats Compromised IPs",
            "type": "ip"
        }
      ]
}

My HTML is below

<form name="my-table" id="my-table">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
            <th></th>
            <th>date</th>
            <th>indicator</th>
            <th>type</th>
            <th>source</th>
            <th>context</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
            <th></th>
            <th>date</th>
            <th>indicator</th>
            <th>type</th>
            <th>source</th>
            <th>context</th>
            </tr>
            </tfoot>
</table>
        <button type="submit" class="btn btn-primary">Submit</button>
        </form>

Finally my Javascript is below

$(document).ready(function (){

   var t = $('#example').DataTable( {
        "ajax": {
            "url": "inc/src/sample.json",
            "dataSrc": function (json) {
                for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                    var newDate = new Date();
                    newDate.setTime(json.data[i].date * 1000);
                    json.data[i].date = newDate.toUTCString();
                }
                return json.data;          
            }
        }, 
       'columnDefs': [
         {
            'targets': 0,
            "data": null,
            'searchable': false,
            'orderable': false,
            'checkboxes': {
               'selectRow': true
            }
         },
         {
            'targets': 1,
            "data": "date"
         },
         {
            'targets': 2,
            "data": "indicator"
         },
         {
            'targets': 3,
            "data": "type"
         },
         {
            'targets': 4,
            "data": "source"
         },
         {
            'targets': 5,
            "data": "context"
         },
      ],
      'select': {
         'style': 'multi'
      },
       language: {
            processing: true
       }
    });

// Handle form submission event 
   $('#my-table').on('submit', function(e){
      // Prevent actual form submission
      e.preventDefault();
      
      var form = this;
      
      var rows_selected = t.column(0).checkboxes.selected();

      // Iterate over all selected checkboxes
      $.each(rows_selected, function(index, rowId){
         // Create a hidden element 
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
         );
         console.log("Index "+index);
         data = t.row( index ).data();
         console.log(data);
      });
      
     
   });
});

Now when I load the page the table loads as expected. However when I say, click the 0th, 3rd, and 4th items, the console prints out the 0th, 1st, and 2nd items instead. I.e., it seems to see that I have selected three items, but it returns me the wrong items.

Any ideas on why this may be happening?
Thanks!

I have a DataTable with server-side processing on. After the user updates selected row(s), I call datatables.ajax.reload(null, false) to refresh the data displayed.

Depending on the server-side business logic, the row(s) that were selected prior to the update were either updated themselves, or new rows were created from them in the database, with different primary keys. These keys are what I'm using for the checkbox column to uniquely identify each row.

The issue is that there are times after the data in the table reloads that the previously selected rows with certain IDs are no longer in the table, yet the footer will still display that there are rows selected. I have to completely reload the entire page to get the footer to clear up with the correct count.

Besides a complete page reload, any other way to get the summary info in the footer to refresh after an AJAX reload of the DataTable? Thanks!

Hello,
When I use table.rows('.myClass').remove(), the number of select row is not updated.

I must be used :
table.rows('.myClass').deselect().remove().draw();

The problem isn't in default datatable checkbox selection :
http://live.datatables.net/seqejati/4/edit

Can you help me please ?

It seems that selectAllCallback event doesnt operate as expected. According to docs this function get called if the select all checkboxe state is changed. But in this jsfiddle https://jsfiddle.net/legreco/6wegnxLz/
you can see the event is fired whatever checkboxes state is changed (it is called on page load too).
This is a very strange behavior.
I hope i am wrong somewhere in the code :)

Are we supposed to use with the select extension or as a standalone extension?

Thank you.

It's not an issue question, more like a proposition for enhancement.

Quite for sometime it's been popular to change the visuals of the checkbox, but to achieve that you need to hide the actual input and tweak the label and the html looks something like this:

<div class="checkbox">
      <input type="checkbox">
      <label></label>
</div>

Also, in my case, I didn't like the select extension for datatable and I didn't want your checkbox extension to show how many checkboxes is selected either, so I had to add my own "setting option" showInfo: false

And tweaked one of the functions to get this

// Update the table information element with selected item summary
if(ctx.aoColumns[i].checkboxes.showInfo) {
      $table.on('draw.dt select.dt deselect.dt', function () {
            self.showInfoSelected();
      });
}

It's not hard to "tamper" with the code, but It gets annoying whenever the solution gets updated and since all the main stuff is built into one function (constructor) I don't really see a point to extend the "Checkbox" class to avoid tweaking the code, since it's going to be basically the copy of the whole solution with a couple of my own lines.

Maybe it would be possible to put 2 of my solutions into the code, so users could set the things up to their taste. It doesn't really affect the functionality of the solution. Defaults could correspond to the current functionality, something like:

showInfo: true,
checkboxHtml: '<input type="checkbox">'

If needed, I can even make a Pull request 👍

how set checked one box using serverSide.

With the updated code I think I found a bug. Previously with the older code it worked.
I have an external button that "clicks" the select all button, something like this:

$('.bulk-actions .btn--selection').on('click', function(e){
     $('.dt-checkboxes-select-all').trigger('click');
});

The click event itself works, I see the checkboxes change and the
$(table.table().container()).on('change', 'input[type="checkbox"]', function() { grabs the count, but it throws and error as well:

Lines may not correspond, because I'm playing around with custom checkboxes from bootstrap, mentioned that a while back to you, but you're still having doubts. Maybe I'll make a pull request later.

The lines in my case are:

275: self.onClickSelectAll(e, this);
545: (ctx.aoColumns[col].checkboxes && ctx.aoColumns[col].checkboxes.selectAllPages)

When you click on several checkboxes on a page and move on to other pages all the rows get selected in every page and the number of rows selected is always 1 when 1 or more checkboxes are selected.

I have the following options used: deferRender: true, processing: true, serverSide: true

Currently in datatable we have "bStateSave" ( save datatable state(pagination, sort, etc) in cookie). is there any provision/setting for checkbox plugin to save its state?

Not sure this is only happen to me or a bug.

A datatables select event listener is not listen to the select event (although row is marked as selected) when I click on the checkbox .

Select event listener is working as expected if click on the row.

Thanks.

I don't know if this is issue or not.
In regular usage datatable does 1 ajax request using serverSide: true for Draw: 1.
When I connect your solution it does one extra ajax request with Draw: 2

Is it a bug? If not why do we have 2 requests. In normal ajax usage you use only 1 request.

Hi there, I fell on your blog post by searching how to implement checkboxes in a clear manner in datatables and it's really a good extension.

I also saw the notice about a workaround you have made not long ago and I would like to report unexpected behavior.

When I select a row (no matter if I do it through the checkbox or by clicking anywhere on the line because of the Select selector), everything works fine, the row is selected and the checkbox status is updated correclty.

When I deselect the row though, it doesn't work if I do it through the checkbox directly. I narrowed down the problem source to this piece of code (~line 578):
` // If state of the checkbox needs to be updated

        if(hasData !== ctrl.checked){
           self.updateCheckbox('cell', [cellIdx], hasData);
           self.updateSelectAll(colIdx);
        }`

I tried commenting it out and then everything started working fine again. I still don't know why it causes this bug, but at least I have an idea of where it's coming from (well, I hope so ahah)

BTW: I know it works on your blog so I'm trying to find where the problem is on my side, I was just noticing you as you asked for it, because it may be a small incompatibility with another plugin/extension.

I use the server-side processing as an example on page http://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/server-side-processing/
when it first opened ajax always calls twice

I use a complicated calculation for my data. so it will take a lot of time if the call twice, it will take a lot

thanks

Hi there, I have a problem with the codes for deleting multiple records using ajax request, here's the code:
Note: I use Laravel.
If I use this lines of code:
{ targets: 0, "checkboxes": { "selectRow": true, "selectCallback": function(nodes, selected){ $('input[type="checkbox"]', nodes).iCheck('update'); }, "selectAllCallback": function(nodes, selected, indeterminate){ $('input[type=checkbox]', nodes).iCheck('update'); } } }
I get error 500, however if I remove the code, I can delete the records without any errors.
For the controller:
public function removeSelected(Request $request) { foreach($request['id'] as $id){ $user = User::findOrFail($id); $user->delete(); } }
and for delete button, I use button with onClick="deleteAll()", here's the code:
function deleteAll(){ if($('input:checked').length < 1){ swal({ title: 'Notice', text: 'Please select user(s) to remove', type: 'warning', html: true, confirmButtonColor: "#DD4B39", confirmButtonText: "Confirm", }); }else if ( swal({ title: 'Warning', text: 'Are you sure to remove the selected user(s)?', type: 'warning', html: true, confirmButtonColor: "#DD4B39", confirmButtonText: "Yes", showCancelButton: true, }, function(isConfirm) { if (isConfirm) { $.ajax({ url : "{{ route('users.remove') }}", type : "POST", data : $('#form-users').serialize(), success : function(data){ swal({ title: 'Removed', text: 'All selected user(s) have been removed.', type: 'success', html: true, confirmButtonColor: "#DD4B39", confirmButtonText: "Confirm" }), Pace.restart(), $('table.display#tb_users').DataTable().ajax.reload(); }, error : function(){ swal({ title: 'Error', text: 'Something went wrong.<br/>Can\t remove selected user(s).', type: 'error', html: true, confirmButtonColor: "#DD4B39", confirmButtonText: "Confirm", }); } }) } }) ); }
Thank you for your time

jquery.dataTables.js

// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
   define( ['jquery', 'datatables'], factory );
}
else if ( typeof exports === 'object' ) {
    // Node/CommonJS
    factory( require('jquery'), require('datatables') );
}
else if ( jQuery && !jQuery.fn.dataTable.Checkboxes ) {
   // Otherwise simply initialise as normal, stopping multiple evaluation
   factory( jQuery, jQuery.fn.dataTable );
}

Error: Cannot find module 'datatables' from ....

DataTables.js using node package name 'datatables.net'.
( https://datatables.net/download/npm )

I solved error just changing require('datatables') to require('datatables.net').
but, that's not appropriate way.

Is it possible to change datatable reference instead of require('datatables') ?

attach my source below.
mySource.js

import jszip from 'jszip';
import dt from 'datatables.net';
import dt_bs from 'datatables.net-bs';
import dt_buttons from 'datatables.net-buttons';
import dt_buttons_bs from 'datatables.net-buttons-bs';
import dt_buttons_html5 from 'datatables.net-buttons/js/buttons.html5';
import dt_buttons_print from 'datatables.net-buttons/js/buttons.print';
import dt_fixedheader from 'datatables.net-fixedheader';
import dt_responsive from 'datatables.net-responsive';
import dt_responsive_bs from 'datatables.net-responsive-bs';
import dt_select from 'datatables.net-select';
import 'datatables.net-checkboxes'; // browserify-shim alias

dt(window, $);
dt_bs(window, $);
dt_buttons(window, $);
dt_buttons_bs(window, $);
dt_buttons_html5(window, $, jszip);
dt_buttons_print(window, $);
dt_fixedheader(window, $);
dt_responsive(window, $);
dt_responsive_bs(window, $);
dt_select(window, $);

See this example to reproduce the problem.

Hi all,

thank you for package!

Is it possible not to add input on certain row?
I try to override render option on my columnDefs but it has no effect.

Thanks

Currently if we click checkbox we are getting only "value" of those buttons but I want to send more data along with that like next target data as well as, so is there any way to get that

I am using like var rows_selected = table.column(0).checkboxes.selected(); console.log(rows_selected.join(","));

Hello.
I have a performance problem on I set the deferRender and and typing in the search field, I have a performance problem with many records, and the select trigger is fired every time the search field changes.
Example on https://jsfiddle.net/8ccdbcyt/

1. select all records with names beginning with "B"
2. typ in search field B, R, E, A
3. see the console log

PS: if I comment the deferRender parameter, the program works ok.
PS2: performance problem occour with many records (in my case (not in the example above), 400 records)
PS3) without the checkboxes extension, the select trigger isn´t fired

When using the select all check box in th, check boxes are not selected/deselected.

Tested in iOS safari and IE 11
Edit: using version 1.2.9 of plugin

Hiya,

First of all great piece of software you wrote here.

How ever I stumbled upon a issue I cannot resolve.

When I create my data table en select a couple of rows en use the following code:

table.column(0).checkboxes.selected();

and output the ID's to console I get the id's orderd on the generation of the data table.

If I sort the the datatable by another column and then again to the same function as above I still get the same order of id's when the data table was created.

What I expected was that the ordering of the id's with

table.column(0).checkboxes.selected();

Also changed upon reodering the table, is this a bug or am I missing something here?

Edit:

Funny thing is with the old one:
https://www.gyrocode.com/articles/jquery-datatables-checkboxes/

the ordering on column is respected :-)

I have a DataTable with server-side processing on. The AJAX request returns an array of objects that I map in the DataTable with the "columns" option. If I check one or more rows, and switch pages, all rows are selected on every subsequent page. If no rows are checked, then no rows are checked on subsequent pages I switch through.

Firstly, I'd like to thank you very much for your effort.

Secondly, my question is how can I implement the state to table.column(colId).checkboxes.select(), so that I can initialize the selected rows from my saved data into the DataTables?

Select rows by tapping on rows.
and click "-" sign (selectAll/unselectAll).
then, selected row count is not working in bottom bar

How can I get the selected rows after filtering e.g. by searching? Using table.column(0).checkboxes.selected() gives me rows including those which are filtered out.

Select all checkbox will not valid when scrollCollapse is enabled
Following is an example:
$('#example').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
...
});

I'm glad to see the datatables-checkboxes has been made a plugin, the first time to see this is in this article .

My datatable's data source is from DOM, the checkbox data is actually the row id in the database. Now I want to add several buttons upon/below the datatable, but I don't know how to realize. When I select the checkboxes which I want to post the id data to the server side, and click button A, this action will trigger server side ajax operations.(or click button B to trigger another ajax operations).

I'm a front-end rookie, I will appreciate your comments.

Having this code:

columnDefs: [ { orderable: false, targets: [ -1 ] }, { targets: 0, className: 'dt-head-center dt-body-center', checkboxes: { selectRow: false }, width: 20, } ],

The row still gets the 'selected' class and gives the impression the checkbox is checked (but it's not). The row class should only toggle when selectRow is set to true?

Hello, when i check on checkbox and i change the page i see all rows get selected.
` var employees_table= $('#all-employees-table').DataTable({
dom: 'Bfrtip',
autoWidth:false,
processing: true,
serverSide: true,
scrollX: true,
cache:true,
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
language: {
"processing": "<img class=loading_image src='{{asset('/images/loadings/Cube.gif') }}'>",
searchPlaceholder: "Rechercher un employé",
},

        ajax: {
            url:'{!! url('/employees2') !!}',
            method:'GET',
            dataType: "json",
            data: function (d) {

                d.employee_status_ids=$("select[name='employee_statuses[]']").val();
                d.department_ids=$("select[name='departments[]']").val();
                d.location_ids=$("select[name='locations[]']").val();
                d.grade_ids=$("select[name='grades[]']").val();

            }
        },
        buttons: [

            {
                text: 'Reload',
                action: function ( e, dt, node, config ) {
                    dt.ajax.reload();
                },
            },
        ],
        columns: [
            {data:'',orderable:false, searchable:false},
            { data: 'employee_code'},
            { data: 'first_name'},
            { data: 'last_name'},
            { data: 'gender_id'},
            {data:'position.name',orderable:false, searchable:false},
            {data:'position.categoryId',orderable:false, searchable:false},
            {data:'department.id',orderable:false, searchable:false},
            {data:'location.id',orderable:false, searchable:false},
            {data:'contract.position.grade_id',orderable:false, searchable:false},
        ],
        order: [[ 1, 'desc' ]]

    });`

Select all is turned off in my solution and I'm using serverside.

Is there a way to deselect everything on all pages (clear)?
The deselect function clears only on the current page.

There is a server side scenario when the user make a select in DataTables, and after that, sends some data (multiple submits) to the server and return success or failure from those submits.

In this case it is needed to show to the user those errors, and that's why it is not possible to use draw() the table (can only to invalidate them).

For those rows where we have a submit with failure, must provide another possibility of submit action.

For those rows where we have a submit with success , must block a new submit action, because it was a success.

Until now everything is doable, with deselect and disable functions.

The thing is that when the user try to reload the data (some filter functions), your plugin remembers the old settings. that's why a reset() or enableAll() function is needed.

Thank you again.

When I click the select all checkbox in a table header, it selects all checkboxes, even when they are disabled or read only.

Version: 1.1.0-alpha.1

Hi,

I'd like the ability the ability to select a range of rows by using the shift key on the checkbox.

The Select extension provided by DataTables allows for the option multi+shift. This allows you to select a range of rows by shift clicking.

Currently, shift-clicking on the checkbox itself does not highlight the range of rows. Shift clicking outside of the checkbox will however highlight the range

Any advice on a way I could achieve the desired result?

Hi,

I was trying to figure out why my render option was not working. After some digging it looks like my options are passed to _fnApplyColumnDefs in the base library. After that, this library is calling the same function and overriding all my settings. https://github.com/gyrocode/jquery-datatables-checkboxes/blob/master/js/dataTables.checkboxes.js#L107

My options:

columnDefs: [{
  targets: 0,
  checkboxes: {
    selectRow: true
  },
  render: function (data, type, full, meta) {
    if (type === 'display') {
      data = '<input type="checkbox" class="dt-checkboxes hello"> Test template'
    }
    return data
  }
}]

The render function works for me if I comment out your implementation of the render option. Do you see any issues with my settings? Otherwise is it possible in this library to first validate if the render function has been declared?

Thanks

It would be nice if jquery-datatables-checkboxes would be available on npm

After loading the checkboxes script, I simply want to make an AJAX call with jQuery, for example:

$.ajax({
  'type': 'POST',
  'dataType': 'text',
  'url': 'my_specific_url',
  'data':  {... my data ... }
});

but it's go wrong. Every time when i try, the call try to run the DataTables ajax loading instead of running the generic AJAX call, what i want.
It seems to me, the plugin override the default jQuery plugin with it's $ attr.

Here is my loading order:

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

require( 'datatables.net' );
require( 'datatables.net-bs' );
require( 'datatables.net-colreorder' );
require( 'datatables.net-fixedcolumns' );
require( 'datatables.net-fixedheader' );
require( 'datatables.net-responsive-bs' );
require( 'datatables.net-rowgroup' );
require( 'datatables.net-rowreorder' );
require( 'datatables.net-scroller' );
require( 'datatables.net-select' );

require('./datatables-checkboxes');

The DataTables table init and the jquery event handling comes after this.
Any idea what caused the trouble in my case?

First, I'm very sorry that my English is relatively poor;

When i selected one row, then call [table].ajax.reload() method, all new rows is selected by default.

How to solve this problem?

Thanks for your reply!

Here is the problem I encountered:

1. Use a table which has more rows than what is displayed in each page so there is a need for paging
2. On Edge, select some rows by using their checkboxes individually
3. Then, the "tristate" checkbox get filled with black square, click on it. On chrome, it would deselect all rows, on Edge, it selects all.
4. Then click the "select all" checkbox to deselect all rows again, and observer the "selected rows" count, it should be wrong.

JS Fiddle: https://jsfiddle.net/hfxz7hna/2/

我使用的是datatables-checkboxes插件，datatables开启了server模式，targets渲染在column 0 那一列。现在的问题是，我想在最后一列渲染一些别的数据，总是会收到datatables的提示，

我感觉使用了datatables-checkboxes插件之后，datatables的columns属性会有点问题，please help me，thank you！

I tried limit the selection with

'select': { 'style': 'single' },

But has not effect.

I think it will be appropriate to state the required version of Datatable in your new version.
I just got "TypeError: Cannot read property 'selectCallback' of undefined" when I upgrade form v1.1.3

You can close this after reading.

when we use responsive plugin (https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js) both checkbox and responsive expland/collapse button appears in same column

Thank for your great plugin.

Do you have any intention to support event after the selection set has been changed state?

Hello there,
There is a problem when trying to block selecting a row using Datatables 'user-select' event

I made a jsFiddle.

Try to click on Angelica Ramos.

After that, click on select All checkbox from header, and.. Angelica is selected.

I tried to put a disabled checkbox for Angelica, but same result (here)

Otherwise great work.
Thanks

There are few places prevents select-all checkbox works in FixedHeader

FixedHeader takes a table header with all events bound to thead and places it outside of the table.

Below the hacky fixes that I have to apply to make them work.

- $tableContainer.on('click', 'thead th.dt-checkboxes-select-all input[type="checkbox"]', function(e){
+ $table.find('thead').on('click', 'th.dt-checkboxes-select-all input[type="checkbox"]', function(e){

-  var $checkboxesSelectAll = $('.dt-checkboxes-select-all[data-col="' + colIdx + '"] input[type="checkbox"]', $tableContainer);
+  var $checkboxesSelectAll = $('.dt-checkboxes-select-all[data-col="' + colIdx + '"] input[type="checkbox"]');

Hi there!

Sorry, but another complication for you.
When using checkboxes with fixedColumns the solution doesn't work anymore, because elements are getting duplicated and element issues occur.

If you click on elements, you still get the selected count, but select all doesn't work anymore, because the element that gets updated is actually "behind" the duplicated one.

Fiddle

Regards

The standard footer for the datatable is showing 1 row selected when a row is selected but the number does not increase when more are selected. Additionally, selecting the "selectall" checkbox at the top shows 1 row selected.

Hi sir.
Thank you for your plugin it is benefit for me.
But I like name and ID return when i click checkbox button.
I get ID but name of row is not return.
Please can you help me.

Checkbox: selectRow': true would do the trick (maybe partly), because it fetches the row selection event even when I click on select all, but I'm not allowed to select the whole row.

In my solution I'm able to select only the checkbox, when I click on other part of the row I get redirected.

So the question is, could we have somekind of additional events to get something similar to checkboxes.selected.

Checkboxes.selected doesn't work for me because if I put this for click event it gets a 1 selection less since it triggers before checkboxes is actually being activated.

I'd like to have an event which would fetch the list at the moment I click on the checkbox.