Header checbox for select all don't work with select2

kevin_sc

Hello can you help me please ?

I use select2 with datatable

return new DataTable(`#${tableName}`, {
            scrollX: true,
            responsive:true,
            destroy: true,
            autoWidth: true,
            serverSide: serverSide,
            searching: false,
            processing: true,
            language: dataTablesFr,
            ajax: dataToPost,
            columnDefs: columnDefinition,
            paging: true,
            dom: 't<"bottom"<"data-table-pagination-footer"ilp>',
            select: {
                style: 'os',
                selector: 'td:first-child',
                headerCheckbox: true
            }
        });

            const dataTable =  DataTableEditorSetting.create(
                        tableName,
                        dataToAjax,
                        [
                            {
                                orderable: false,
                                render: DataTables.render.select(),
                                targets: 0
                            },

and i have a <th></th> my datatatble work well but no checkbox header to select all

<th data-dt-column="0" rowspan="1" colspan="1" class="dt-orderable-none dt-ordering-asc" aria-sort="ascending" aria-label=""><span class="dt-column-title"></span><span class="dt-column-order"></span></th>

I dont find why, have you idea please ?

kthorngren

I use select2 with datatable

How are you using select2 with Datatables?

but no checkbox header to select all

Are you suing Select 2.0.0 which is when this feature was added?

This [example[(https://www.datatables.net/extensions/select/examples/checkbox/checkbox.html) works. The select.headerCheckbox option is set to true by default so you shouldn't need to use headerCheckbox: true.

Please post a link to your page or a test case replicating the issue so we can help debug.
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kevin_sc

Thanks for you help

I use in my package json
"datatables.net-select": "^2.0.0",

In my class datatable

 static create(
                    tableName,
                    dataToPost,
                    columnDefinition,
                    serverSide= true
                )
                {
                    return new DataTable(`#${tableName}`, {
                        scrollX: true,
                        responsive:true,
                        destroy: true,
                        autoWidth: true,
                        serverSide: serverSide,
                        searching: false,
                        processing: true,
                        language: dataTablesFr,
                        ajax: dataToPost,
                        columnDefs: columnDefinition,
                        paging: true,
                        dom: 't<"bottom"<"data-table-pagination-footer"ilp>',
                        select: {
                            style: 'os',
                            selector: 'td:first-child input[type="checkbox"]'
                        }
                    });
                }

and i use

class ContractPlotDatatTable
{
    create(dataToAjax)
    {
        const tableName = 'contract-plots-table';
        const dataTable =  DataTableEditorSetting.create(
            tableName,
            dataToAjax,
            [
                {
                    orderable: false,
                    render: DataTables.render.select(),
                    targets: 0
                },

I tried debuger but

ncaught Error: Syntax error, unrecognized expression: <div/>
    jQuery 9
    mjs dataTables.mjs:9274
    _api_scope dataTables.mjs:6757
    [1]</< DT_Debug.js:69
    [1]< DT_Debug.js:165
    o DT_Debug.js:1
    r DT_Debug.js:1
    <anonymous> DT_Debug.js:1
jquery.js:1487
    jQuery 9
    mjs dataTables.mjs:9274
    _api_scope dataTables.mjs:6757
    [1]</< DT_Debug.js:69
    [1]< DT_Debug.js:165
    o DT_Debug.js:1
    r DT_Debug.js:1
    <anonyme> DT_Debug.js:1

in my js i have when my datatble is load

 plots(event) {
    this.constructor.contractPlotDataTable = (new ContractPlotDatatTable).create(
        DataTableSetting.setDataToAjax(`/societaires/contrats/${event.params.id}/parcelles`)
    );
    window.DataTable = this.constructor.contractPlotDataTable;
    (function() {
      var url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
      if (typeof DT_Debug != 'undefined') {
          if (DT_Debug.instance !== null) {
              DT_Debug.close();
          } else {
              new DT_Debug();
          }
      } else {
          var n = document.createElement('script');
          n.setAttribute('language', 'JavaScript');
          n.setAttribute('src', url + '?rand=' + new Date().getTime());
          document.body.appendChild(n);
      }
  })();
  }

Thanks

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

kthorngren

I'm not familiar with DataTableEditorSetting.create(). Im' guessing it initializes the Editor. You have this in that method:

                {
                    orderable: false,
                    render: DataTables.render.select(),
                    targets: 0
                },

This is a Datatables config not an Editor config. You probably will need to remove it from the DataTableEditorSetting.create() code and place it in the Datatables init code like this example.

Kevin

kevin_sc

It's just a js class

import DataTable from "datatables.net-dt";
import dataTablesFr from "./datatables.fr-FR.json";
import DataTables from "datatables.net-select";

class DataTableEditorSetting
{
    static create(
        tableName,
        dataToPost,
        columnDefinition,
        serverSide= true
    )
    {
        columnDefinition.unshift(                {
            orderable: false,
            render: DataTables.render.select(),
            targets: 0
        });
        console.log(columnDefinition);
        return new DataTable(`#${tableName}`, {
            scrollX: true,
            responsive:true,
            destroy: true,
            autoWidth: true,
            serverSide: serverSide,
            searching: false,
            processing: true,
            language: dataTablesFr,
            ajax: dataToPost,
            columnDefs: columnDefinition,
            paging: true,
            dom: 't<"bottom"<"data-table-pagination-footer"ilp>',
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]
        });
    }

    static setDataToAjax(url, method = "GET", postData = null)
    {
        let dataToAjax = {
            "url": url,
            "type": method
        }
        if (postData !== null) {
            dataToAjax.data = function (d) {
                // Send filter params in POST method
                d.filters = postData;
            }
        }
        return dataToAjax;
    }
}

export default DataTableEditorSetting;`

import { input_generator } from "./editor/input_generator";
import { input_autocomplet_generator } from "./editor/input_autocomplet_generator";
import DataTables from "datatables.net-select";
import { checkbox_generator } from "./editor/checkbox_generator";
import DataTableEditorSetting from "./DataTableEditorSetting";
import { input_datepicker_generator } from "./editor/input_datapicker_generator";

/**
 * Order of columns have to be the same than ContarctController:ajaxPlots
 */
class ContractPlotDatatTable
{
    create(dataToAjax)
    {
        const tableName = 'contract-plots-table';
        const dataTable =  DataTableEditorSetting.create(
            tableName,
            dataToAjax,
            [
                {
                    name: 'department',
                    targets: 1,
                    render: function (data, type, row, meta) {
                        return input_autocomplet_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'department', row[0], 'input->contract--plots#searchAutocomplete');
                     }
                },
                {
                    name: 'insee_code',
                    targets: 2,
                    render: function (data, type, row, meta) {
                        return input_autocomplet_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'insee_code', row[1], 'input->contract--plots#searchAutocomplete');
                    }
                },
                {
                    name: 'municipality_label',
                    targets: 3,
                    render: function (data, type, row, meta) {
                        return input_autocomplet_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'municipality_label', row[2], 'input->contract--plots#searchAutocomplete', row[2]);

                    }
                },
                {
                    name: 'type',
                    targets: 4,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'type', row[3]);
                    }
                },
                {
                    name: 'specie_code',
                    targets: 5,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'specie_code', row[4], 'input->contract--plots#onSpecieCodeChange');
                    }
                },
                {
                    name: 'specie_label',
                    targets: 6,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'specie_label', row[5], '', row[5]);
                    }
                },
                {
                    name: 'size',
                    targets: 7,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'size', row[6], 'input->contract--plots#onChangeSize');
                    }
                },
                {
                    name: 'creation_year',

                    targets: 8,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'creation_year', row[7]);
                    }
                },
                {
                    name: 'start_date',

                    targets: 9,
                    render: function (data, type, row, meta) {
                        return input_datepicker_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'start_date', row[8]);
                    }
                },
                {
                    name: 'fire_reconstitution_package',

                    targets: 10,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'fire_reconstitution_package', row[9]);
                    }
                },
                {
                    name: 'storm_reconstitution_package',

                    targets: 11,
                    render: function (data, type, row, meta) {
                        return input_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'storm_reconstitution_package', row[10]);
                    }
                },
                {
                    name: 'redu_cpn',

                    targets: 12,
                    render: function (data, type, row, meta) {
                        return checkbox_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'redu_cpn', row[11]);
                    }
                },
                {
                    name: 'end_date',

                    targets: 13,
                    render: function (data, type, row, meta) {
                        return input_datepicker_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'end_date', row[12]);
                    }
                },
                {
                    name: 'future_fire_value_option',

                    targets: 14,
                    render: function (data, type, row, meta) {
                        return input_autocomplet_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'future_fire_value_option', row[14], 'input->contract--plots#futrureValueOptionAutocomplete');

                    }
                },
                {
                    name: 'future_storm_value_type',

                    targets: 15,
                    render: function (data, type, row, meta) {
                        return input_autocomplet_generator(row[13], 'blur->contract--plots#plotDataTableInputUpdate', 'future_storm_value_type', row[15], 'input->contract--plots#futrureValueOptionAutocomplete');
                    }
                }
            ],
            true
        );

        return dataTable;
    }
}
export default ContractPlotDatatTable;

the table

<section role="{{table_name}}" class="w-full">
    <div class="grid grid-cols-6 gap-4">
        <h3 class="mb-6 data-table-title col-start-1 col-end-3 ">Liste des Parcelles</h3>
    </div>
    <div>
        <ul class="{{table_name}}-errors pb-2">
        </ul>
    </div>
    <table id="{{table_name}}-table" class="border-b border-gray-500 shadow divide-y w-[100%] mt-5">
        <thead>
            <tr class="px-6 py-2 text-xs font-normal bg-[#F2F2FC] text-[#464B7A]">
                <th ></th>
                <th class="px-12 py-4">DPT*</th>
                <th class="px-12 py-4">N°C*</th>
                <th class="px-12 py-4">COMMUNE*</th>
                <th class="px-12 py-4">PARCELLE</th>
                <th class="px-12 py-4">ESSENCE*</th>
                <th class="px-12 py-4">Libellé essence</th>
                <th class="px-12 py-4">SUPERFICIE*</th>
                <th class="px-12 py-4">CREA</th>
                <th class="px-12 py-4">DATE DEBUT*</th>
                <th class="px-12 py-4">Montant total incendie*</th>
                <th class="px-12 py-4">Montant total tempête*</th>
                <th class="px-12 py-4">REMISE NEIGE</th>
                <th class="px-12 py-4">DATE FIN</th>
                <th class="px-12 py-4">OPTION INCENDIE</th>
                <th class="px-12 py-4">OPTION TEMPETE</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-300 text-sm">
        </tbody>
    </table>
</section>

Always same problem

but the column header is curious
<span class="dt-column-title"></span><span class="dt-column-order"></span>

Thanks and sorry

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

kthorngren

There is nothing obvious in your code. Please post a link to your page or a test case replicating the issue so we can help debug.
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kevin_sc

Finally i use custom selectbox and javascript event

chris.durham

It might not be relevant, but I've got a very similiar instance where the header checkbox doesn't appear.

Curiously one one place in the application it does, and in one place it doesn't. The only difference in terms of configuration between the two is that one has pre-rendered data in the table itself and the other is dynamically populated via ajax and setting the .data(). Is it possible that when it's done dynamically datatables isn't adding the header checkbox?

(We are using DataTables 2.0.8 and the other latest versions of the extensions)

kthorngren

@chris.durham

Here is an example of an ajax loaded Datatable with the select all checkbox in the header:
https://live.datatables.net/cirazoqu/1/edit

Can you provide a test case showing the issue you are having so we can help debug?
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chris.durham

@kthorngren

I followed the advice on a different thread and added className: 'dt-select' to my columns:{} definition for the first column and that solved it, so I think it's something that @allan is aware of..