Header checbox for select all don't work with select2

Header checbox for select all don't work with select2

kevin_sckevin_sc Posts: 5Questions: 2Answers: 0
edited March 25 in Free community support

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 ?

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited March 25

    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_sckevin_sc Posts: 5Questions: 2Answers: 0
    edited March 27

    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

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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_sckevin_sc Posts: 5Questions: 2Answers: 0
    edited March 28

    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

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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_sckevin_sc Posts: 5Questions: 2Answers: 0

    Finally i use custom selectbox and javascript event :)

  • chris.durhamchris.durham Posts: 12Questions: 4Answers: 0

    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)

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    @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.durhamchris.durham Posts: 12Questions: 4Answers: 0

    @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..

Sign In or Register to comment.