Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

BUG: dataTable script handling of Searched Terms with Checkboxes ticked


Hey Sean

I've noted that when there are checkboxes ticked, the behaviour of searching is undesirable and really a bit of a bug. There are two issues:

**Issue 1: Toolbar stays in CheckBox mode when searching**
Steps to Re-create:
1. in a dataTable list (rendered on client-side), check a couple of items
2. then add search terms in search box

Expected:
1. the checked toolbar should remain visible

Actual:
1. the checked toolbar disappears

**Issue 2: CheckBox items disappear if selected during a search**
Steps to Re-create:
1. in a dataTable list (rendered on client-side), add search terms in search box
2. check the desired items
3. delete the search terms in the search box

Expected:
1. the checked items should appear in the list (also with the toolbar remaining)

Actual:
1. The checked items and toolbar appear as though nothing is checked, however, if the search terms are added back, the initially checked items are still checked. That means the dataTables hasn't cleared the checks, even though the checked items are no longer visible and for all intents and purposes, looked reset.


Desired behaviour:
1. When items are checked, these are pinned in place, so that when search terms are added, they remain onscreen.
2. When search terms are added, the checkbox toolbar remains visible, and will continue to remain visible until all items are unchecked.


This is pretty critical because the items are still checked even when not visible, so any scripting I do to delete checked items, can occur without visibility to the user. (ie. when using a batch delete function based on the checked items).

Any advice?

Cheers


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi Sean, please don't worry about this one. I've figured out a workaround.

I've used the order() api to automatically re-order the table whenever a checkbox is ticked, this has the effect of pinning ticked items to the top, and changed the addClass to a toggle() that only switches when the total number of selected items is 0 or >0.

Cheers!



Glad to hear that happy

Thanks for sharing the solution and all the best with your project.

Regard!


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(