Checkbox select all selects all pages, I want to select all only in the current page.

gabrielssdev

Hello guys, I have this table..

<table id="sampleTable" class="table table-hover table-sm table-bordered table-striped dataTable select display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th> 
        </tr>
    </thead>
    <tbody id="tableContent">
        @foreach (var sampleData in Model.SampleList)
        {
            <tr>
                <td scope="row">@sampleData .Id</td>
                <td>@sampleData .Column1</td>
                <td>@sampleData .Column2</td>
                <td>@sampleData .Column3</td> 
                <td>@sampleData .Column4</td> 
            </tr>
        }
    </tbody>
</table>

And my datatable is setup like this.

 var table = $('#sampleTable').DataTable({
     order: [[2, 'desc']],
     stateSave: true,
     select: {
         style: 'multi',
         selector: 'td:first-child'
     },
     columnDefs: [
         {
             orderable: false,
             render: DataTable.render.select(),
             width: "8%",
             targets: 0,
             checkboxes: {
                 selectRow: true,
                 selectAllPages: false
             },
         }
     ],
     language: {
         searchBuilder: {
             title: {
                 0: 'Filters',
                 _: 'Filters (%d)'
             }
         }
     },
     layout: {
         topStart: {
             searchBuilder: {
                 greyscale: true
             }
         },
         bottomStart: 'pageLength'
     }
 });

When I try to select all, it selects all from all pages, I just want the current.

I'm using these versions.
* DataTables 2.0.8, DateTime 1.5.2, Responsive 3.0.2, SearchBuilder 1.7.1, Select 2.0.3

Thanks a lot!

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

            checkboxes: {
                selectRow: true,
                selectAllPages: false
            },

This is from the Gyrocode checkboxes plugin. Are you using this plugin?

You also have render: DataTable.render.select(), which renders the checkboxes from the Select extension. Only one will work but it sounds like the Select extension is the active plugin.

You may want to remove the Gyrocode plugin.

Use the select.headerCheckbox with the setting select-page. See the second example in the docs.

Kevin

gabrielssdev

Hello Kevin, thanks a lot for your help, I removed the Gyrocode plugin and added the headerCheckbox: 'select-page' but still when I click on select all, all pages are selected.

kthorngren

I just found there is an example of page selection working. Can you provide a link to your page or test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

gabrielssdev

I think it is something related to the way I bind the table body, because I tried with the same locally and it worked, I was thinking of getting my Model.SampleList and add to a js variable and then add in the datatable. Would that work? And how can I do this? Thanks a lot for your time Kevin!

kthorngren

I was thinking of getting my Model.SampleList and add to a js variable and then add in the datatable.

Sorry I don't have any idea what you are referring to.

The only thing I can offer is to make sure you are loading jquery.js and datatables.js (plus the other extensions) only once. Strange behavior can happen if any of these are loaded multiple time.

Kevin