Multiple Check boxes to update table

gpapaiko

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

gpapaiko

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.

kthorngren

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

gpapaiko

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

kthorngren

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

gpapaiko

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>

kthorngren

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

gpapaiko

Hi Kevin,

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