DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Multiple Check boxes to update table

Multiple Check boxes to update table

gpapaikogpapaiko Posts: 8Questions: 3Answers: 0
in Free community support

Hi,

I am new datatable and need some help.
I have a table that loads correctly, but I want to put two check boxes that both will act on the same column.
When check box 1 is tick it hides some rows based on column x (say column 4), when check box 2 is checked is display some rows based on a another value in the same column (column 4).

The way i would like to operate is both check boxes will act on the same column say column 4:
if check box 1 is ticked, then check box 1needs be unchecked and the data as per check box 1 criteria is displayed.
if check box 2 is ticked, then check box 1needs be unchecked and the data as per check box 2 criteria is displayed.

Now I have this half working , second method (check box 2) is working but I cant't seem to get the check box 1 to behave the same way.
Below is the code I am using.

    $(document).ready( function () {
               .
.
.
.
.
                $.fn.dataTable.ext.search.push(
                function (settings, searchData, index, rowData, counter) {

                    var checkedcmp = $('input:checkbox[name="chk_boxcmp"]').is(':checked');
                    var checked = $('input:checkbox[name="chk_box"]').is(':checked');


                    if (checked && searchData[4] != '') {
                        document.getElementById("chk_boxcmp").checked = false;
                        //document.getElementById("chk_boxcmp").disabled = true;
                        return false;
                    } 

                    if (checkedcmp && searchData[4] == '' ) {
                        document.getElementById("chk_box").checked = false;
                        //document.getElementById("chk_box").disabled = true;
                        return false;
                    } 

                    // Otherwise display the row
                    return true;

                });                   

                var table = $('#stocktbl').DataTable();

                $('input:checkbox').on('change', function () {

                    // Run the search plugin
                    table.draw();

                }

            );



        } );

Any help will be appreciated.
Thanks
George

This question has accepted answers - jump to:

Answers

  • gpapaikogpapaiko Posts: 8Questions: 3Answers: 0

    HI
    I have created a sample here (clone the original one I used as a base)
    url: http://live.datatables.net/fixuroja/1/edit

    Thanks.

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949
    Answer ✓

    You don't want to update the checkboxes in the search plugin. That code is run for each row so it would be inefficient. The best place is to uncheck the other checkbox in the change event. For example:
    http://live.datatables.net/kehozene/1/edit

    Kevin

  • gpapaikogpapaiko Posts: 8Questions: 3Answers: 0

    Hi Kevin,

    Thanks for that, it works like a charm. :) :) :) :) :)

    Is there a way to set one of them as the default once the data has been loaded?

    Thanks again.
    George

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949
    Answer ✓

    Yes, you can use jQuery to set the checkbox, for example $('#chk_box').prop('checked', true);. If you set it before Datatables is initialized then it will take affect when the data is loaded. Here is the updated example:
    http://live.datatables.net/kehozene/2/edit

    KEvin

  • gpapaikogpapaiko Posts: 8Questions: 3Answers: 0

    Hi Kevin,

    Thanks for this but it is not working on system.
    The check box is checked but the table is not filters..
    Below is the code that i am using, i do have a few custom buttons.

    ```Script Code:

       <script type="text/javascript">
            $(document).ready( function () {    
                $('#chk_box').prop('checked', true);
                $('#stocktbl').DataTable({
                    "pagingType": "full_numbers",
                    scrollY: 350,
                    ordering:  true,
                    select: true,
                "initComplete": function(settings, json, searchData, index, rowData, counter) {
                    $('div.loading').remove();
                    //alert( 'DataTables has finished its initialisation.' );

              },
            dom: 'Bfrtip',
            lengthMenu: [
                [ 10, 25, 50, 75, 100, -1 ],
                [ '10 rows', '25 rows', '50 rows', '75 rows', '100 rows', 'Show all' ]
            ],
            buttons: [
                'pageLength',
                {
                    extend: 'print',
                    text: 'Print all',
                    exportOptions: {                            
                        modifier: {                             
                            selected: null,
                            columns: ':visible'
                        },                          
                         columns: ':visible'                             
                    },                          
                    customize: function (win) {
                        $(win.document.body)
                            .css( 'font-size', '10pt' )
                            .prepend(
                                '<img src="img/logo.png" style="position:absolute; top:0; left:0;" />'
                            );

                        $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                        $(win.document.body).find('tr th').each(function(index){
                            $(this).css('background-color','#000000');
                            $(this).css('color','#FFFFFF');
                        });
                        $(win.document.body).find('tr:nth-child(odd) td').each(function(index){
                            $(this).css('background-color','#D0D0D0');
                        });
                        $(win.document.body).find('tr:nth-child(even) td').each(function(index){
                            $(this).css('background-color','#f2f2f2');
                        });
                        $(win.document.body).find('h1').css('text-align','left');
                        $(win.document.body).find('td:nth-child(1)').each(function(index){ 
                            $(this).css('width', '5%', 'max-width', '5%');
                         });

                    }
                },
                {
                    extend: 'print',
                    text: 'Print selected',
                    exportOptions:{
                        columns: ':visible'
                    },
                    customize: function (win) {
                        $(win.document.body)
                            .css( 'font-size', '10pt' )
                            .prepend(
                                '<img src="img/logo.png" style="position:absolute; top:0; left:0;" />'
                            );

                        $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                        $(win.document.body).find('tr th').each(function(index){
                            $(this).css('background-color','#000000');
                            $(this).css('color','#FFFFFF');
                        });
                        $(win.document.body).find('tr:nth-child(odd) td').each(function(index){
                            $(this).css('background-color','#D0D0D0');
                        });
                        $(win.document.body).find('tr:nth-child(even) td').each(function(index){
                            $(this).css('background-color','#f2f2f2');
                        });
                        $(win.document.body).find('h1').css('text-align','left');

                    }
                },
                {
                    extend: 'pdf',
                    text: 'Save to PDF',
                    exportOptions:{
                        columns: ':visible'
                    }

                },
                {
                    extend: 'excel',
                    text: 'Save to Excel',
                    exportOptions:{
                        columns: ':visible'
                    }
                },


                'colvis',

            ],
            columnDefs: [ {
                targets: -1,
                visible: true
            } ]
        }); //end of datatble



        $.fn.dataTable.ext.search.push(
            function (settings, searchData, index, rowData, counter) {

                var checkedcmp = $('input:checkbox[name="chk_boxcmp"]').is(':checked');
                var checked = $('input:checkbox[name="chk_box"]').is(':checked');


                if (checked && searchData[4] !== '') {                      
                    return false;
                } else if (checkedcmp && searchData[4] === '' ) {
                    return false;
                } 

                // Otherwise display the row
                return true;
            }
        ); //end of search push                   

        var table = $('#stocktbl').DataTable();

        $('input:checkbox').on('change', function () {

            var id = $(this).attr('id');

            if (id === 'chk_box') {
              $("#chk_boxcmp").prop("checked", false);
            } else if (id === 'chk_boxcmp') {
              $("#chk_box").prop("checked", false);
            }
            // Run the search plugin
            table.draw();                   
        }); //end of checkbox on change

    }); //end of doucmnet ready

</script>
  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949
    Answer ✓

    You need to invoke the plugin code, $.fn.dataTable.ext.search.push(...) before initializing Datatables. Otherwise it won't be ready when Datatables initializes and won't be executed on table load. You can refer to the example to see this. Move it between lines 3 and 4.

    Kevin

  • gpapaikogpapaiko Posts: 8Questions: 3Answers: 0

    Hi Kevin,

    Thanks that worked, had to make a little adjustment.
    Thanks for all your help with this learnt a lot from it.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.