Filter rows according to checkbox column

Filter rows according to checkbox column

Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

Live example
http://live.datatables.net/hiyimito/2/edit

I have a checkbox column in my datatable, I want to be able to filter the rows with a toggle checkbox filter to show/hide the rows in the table according to the value of checkbox(checked or unchecked)

This question has accepted answers - jump to:

«1

Answers

  • colincolin Posts: 8,661Questions: 0Answers: 1,449
    Answer ✓

    This thread should help, it's asking the same thing.

    Cheers,

    Colin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Thanks colin!

    I tried this in my live example
    http://live.datatables.net/tehuniko/1/edit

    On clicking the checkbox filter "Toggle checked/unchecked", I was able to hide the checked rows but I can't seem to toggle with this.

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    What exactly do you want to do?

    You will need to add logic into the search plugin to display the rows you want based on the checkbox. Do you want to show checked, unchecked or all when the "Toggle checked/unchecked" is checked or unchecked? At the moment all its doing is filtering rows that are checked using if (!$(row).find('input').prop('checked')). Its not getting the checkbox state of "Toggle checked/unchecked" to determine how to filter the rows.

    You will probably want to read up on Search Plugins.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Basically I just want to be able to toggle between showing checked/unchecked rows

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Thanks Kevin, I'm reading about the Search Plugins, also wanted to check with you the feasibility of the following

    Will it be possible to accomplish these steps.

    1. By default on render, display only the unchecked rows.
    2. On selecting the toggle checkbox, show/hide the checked rows
  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    Answer ✓

    By default on render, display only the unchecked rows.

    Place the search plugin above the Datatables init code and the initial Datatable display will incorporate the plugin.

    On selecting the toggle checkbox, show/hide the checked rows

    In the search plugin get the checked state of the toggle checkbox then use that to determine if whether to check the rows checked state as true or false.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0
    edited May 4

    How do I determine the row value before instantiating the datatable.
    This is what I have working for the toggle checkbox

    After datatable init

    $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) {
                            var found = false;
                            var row = table.row(dataIndex).node();
                            var checked = $(\'input[name="chk_box"]\').prop(\'checked\');
                             
                            if (checked && $(row).find(\'input\').prop(\'checked\')) {
                                return false;
                              }
                            return  true;
                    })
    
    

    To enable the filtering on render, how to fetch the row of the datatable with the dataindex before the init of datatable

    Will this work with jquery object of table

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    edited May 4

    Did you place the search plugin before the Datatables init code in your script? This will allow it to be established and run after Datatables initializes. Basically:

    $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) {
                            var found = false;
                            var row = table.row(dataIndex).node();
                            var checked = $(\'input[name="chk_box"]\').prop(\'checked\');
                              
                            if (checked && $(row).find(\'input\').prop(\'checked\')) {
                                return false;
                              }
                            return  true;
                    })
    
    var table = $('#myTable').DataTable({
      <init code>
    });
    

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    edited May 4

    All of the search plugins you push will run each time there is a table draw, ie, searching, sorting, paging, etc. It probably won't work well to push the initial version then later push the one that checks the toggle checkbox state. Both will execute which might provide confusing results.

    You example is giving this error in the console:

    Uncaught TypeError: Cannot read property 'row' of undefined

    Now I understand your question:

    How do I determine the row value before instantiating the datatable.

    You need to get an instance of the Datatable API. For more info on this see this page:
    https://datatables.net/manual/api

    I updated your example here:
    http://live.datatables.net/punezazu/1/edit

    Not sure its doing exactly what you want though.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    okay I understand,
    I wanted to achieve two things basically

    1. On render show all the rows that are unchecked
    2. Toggle the checked unchecked rows with a checkbox filter

    Point two is working currently, not able to implement the first one

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    Basically I just want to be able to toggle between showing checked/unchecked rows

    The example I provided doesn't do this. I updated the example to do this and to show unchecked when the table is loaded:
    http://live.datatables.net/punezazu/3/edit

    All I did was change the if statement in the search plugin to this:
    if (checked !== $(row).find('input').prop('checked'))

    It compares the toggle checkbox to the checked state in the row and displays the rows accordingly.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Okay, since this search plugin acts only as a filter, I'm wondering if we'll be able to display all checked and unchecked rows at once.

    1. On render only unchecked rows are displayed, checked are filtered
    2. On checking the toggle checkbox, both checked and unchecked rows are displayed
    3. On unchecking the toggle checkbox, checked rows are hidden again
  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    Yes. Just change the logic in the search plugin to do what you want. Instead of a single if statement it will likely take in if/else if/else group of statements.

    Kevin

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    Probably the easiest thing to do is to first check the see if the toggle checkbox is checked and if it is just return true. There is no need to compare anything with the row. The rest of the plugin can probably stay as is.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Yeah, not sure about not comparing with the row

    I just used checked condition here and it doesn't seem to work
    http://live.datatables.net/xixagecu/1/edit

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    Answer ✓

    Sorry, not sure what condition you checked. I added the code in this example:
    http://live.datatables.net/yelixico/1/edit

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    okay thanks!
    now I understood, you meant adding another condition with just checked = true on top of the one comparing with row.

    Thanks a lot Kevin!

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    If we check any row from the datatable records, it hides automatically with the search plugin code. Is there a way to prevent that, basically I want to do a form submit for tracking checked/unchecked rows updates from the datatables.

    It won't be user intuitive to have the rows hidden automatically when a user selects them, he may change his mind to unselect it before submitting the form

    http://live.datatables.net/nehoqiko/1/edit

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    You need to make the selector for your toggle checkbox more specific. Now adds the event to all the checkboxes. I changed it in this example:
    http://live.datatables.net/nehoqiko/3/edit

    Its now this:
    $('input[name=chk_box]').on('change', function () {...});

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    ohhh, thanks!

    I assume I can use the hide function with search plugin code to enable show hide of a column.
    By default set visible false

    columnDefs": [
    {
    "targets": [ 2 ],
    "visible": false,
    "searchable": false
    },

    and then have that column visible under the checked conditions with
    api column().visible()

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    You can use column().visible() in the click event to show and hide the column based on the checked state. Is that what you are asking?

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Yeah, okay!

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    using column().visible() on the first column for checkboxe hides all data
    http://live.datatables.net/ropunogu/1/edit

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    I'm not clear on what you are trying to do. Please provide more details of the process you want to hide and show columns. Using column().visible() inside the plugin is probably not what you want to do. What checkbox do you want to show/hide the column?

    If you want to show/hide the checkbox column based on the checked state of the Toggle Checked checkbox then you will use column().visible() in your click event.

    Kevin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    I want to hide the column of the table which is checkbox column
    Based on the checked state of the Toggle checkbox "Toggle checked/unchecked " ,
    I would like to show/hide the first column of the table

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    But on render the first column should be hidden and then have the toggle function with the checked state of "Toggle checked/unchecked" checkbox

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    Use columns.visible to set the initial column state. In your click event get the checkbox state and set the appropriate visibility using column().visible().

    KEvin

  • Vishakha-92Vishakha-92 Posts: 27Questions: 1Answers: 0

    Using columns.visible to set the initial column state hides all data
    http://live.datatables.net/ropunogu/1/edit

Sign In or Register to comment.