How to clear the search, select, checkbox and radio filters at once ?

How to clear the search, select, checkbox and radio filters at once ?

kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

Link to test case: http://live.datatables.net/cuyukasu/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Two problems exist and unable to solve self.

1) The search field text clears by clicking the button "Clear All Filters" but table not redraw. Stuck with at the search values.

2) The check boxes only cleared that are visible only in the window while clicking the button "Clear All Filters".

Any help welcome.

Answers

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    One more problem exists

    3) While sorting descending with the custom created buttons the corresponding arrow not active with the parent element at the header.

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Forget to mention that the script for Button "Clear All Filters" is available below the table in html section.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    The search field text clears by clicking the button "Clear All Filters" but table not redraw. Stuck with at the search values.

    You have two functions that are called when clicking the button:

    function ClearFilters() { ... }
    

    and

    $('#clear-filter').click(function() { ... })
    

    The ClearFilters() function generates this error:

    Uncaught TypeError: Cannot read property 'deselect' of undefined
    at ClearFilters (<anonymous>:16:23)
    at HTMLButtonElement.onclick

    The click event has this error:

    Uncaught ReferenceError: rows is not defined

    Looks like you are using the Gyrocode Checkboxes plugin API but you haven't loaded the plugin code nor enabled it in your Datatables config.

    I commented out the Gyrocode API calls and change the $('#clear-filter') selector to keep it from running. Now the clear button works.

    The check boxes only cleared that are visible only in the window while clicking the button "Clear All Filters".

    The methods you are trying work with the rows in the DOM. When using Datatables the only rows in the DOM are those on the current page. You will need to use an API like cells().nodes(). See this exmaple from this thread for one technique to clear the checkboxes.

    While sorting descending with the custom created buttons the corresponding arrow not active with the parent element at the header.

    The order() API takes the strings asc and desc. You are using des. I changed the example to use desc.

    The updated example with the above changes:
    http://live.datatables.net/cuyukasu/2/edit

    Kevin

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Datatable,

                 Thanks and cheers for solving the problem with search clear.
    

    But still struggle with checkbox clear.

    From the answer See this exmaple from this thread for one technique to clear the checkboxes. (http://live.datatables.net/pabewumi/1/edit)

    a) unable to sort if it's checked at (http://live.datatables.net/pabewumi/1/edit)

    b) unable to give a name to the column at (http://live.datatables.net/pabewumi/1/edit).

    Any solution ?

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Datatable,

                Solve the problem b) as mentioned above in the previous post as at
    

    http://live.datatables.net/pabewumi/6/edit

    But still the one exists a) unable to sort if it's checked at http://live.datatables.net/pabewumi/6/edit

    Any solution or help ?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    See this example:
    http://live.datatables.net/cubefaqa/6/edit

    It keeps track of the checkbox checked state with 1 being checked and undefined or 0 being unchecked. This allows for sorting to work. It uses a click event handler to update the cell().data() appropriately. And it uses rowCallback to update the checkbox state based on the value.

    Kevin

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Datatable,

                    Now the question is back again as how to clear the checkbox selections at http://live.datatables.net/cubefaqa/6/edit
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Use cell().data() to set the value to 0. Here is the updated example:
    http://live.datatables.net/cubefaqa/8/edit

    Note the use of draw( false ) to stay on the same page. See the draw() API for more details.

    Kevin

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0
    edited June 2021

    Datatable,

    The new problem with http://live.datatables.net/cubefaqa/8/edit is unable to select the required one but select works auto in serial format ?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not sure what that means - please can you provide steps on how to reproduce the issue you want help with,

    Colin

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Datatable,

                    why can't i select my own check boxes here at  http://live.datatables.net/cubefaqa/8/edit ? while click to select the 3rd it selects 1 ?
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I don't understand the problem either. When I click an unchecked checkbox it becomes checked. Clicking it again it becomes unchecked. Please provide specific steps to show the problem.

    Kevin

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Datatable,

                         Try like this
    

    first select some rows (checkbox)

    then

    click the sort up (asc)

    and

    down (desc)

    once the selection is desc and all selected check boxes is invisible

    click the button uncheck all to un check all check boxes

    then

    click the sort up (asc)

    and

    down (desc)

    everything works fine ?

    GOOD.

    now start again random check box selection

    it selects only from top in a serial way ?

    at

    http://live.datatables.net/cubefaqa/8/edit

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I think I see the problem. You are sorting by the checkbox column. When you click a check box the table will be reordered right away so the row you clicked is sorted to the end of the table. I updated the test case to show only a few rows via the search option. Try these steps:

    • Select one of the checkboxes
    • Sort the Check column and the selected rows move to the bottom
    • Select another checkbox and you will see it move immediately to the bottom

    http://live.datatables.net/cubefaqa/11/edit

    Kevin

Sign In or Register to comment.