Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Datatables Serverside Selected Count Bug


In the Docs & Components example for Serverside AJAX Datatable, the footer selection counter is not working properly. No matter how many rows are selected, it always says "1 row selected".

In addition, clicking the whitearea in checkbox column but not the checkbox itself will toggle the "1 row selected" text even though the checkbox element is never interacted with.

https://preview.keenthemes.com/metronic8/demo14/documentation/general/datatables/server-side.html


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Thanks for pointing this out. There's a slight misconfig in the Datatable initialization JS. We'll be pushing a fix for this on our next update.

In the meantime, if you require a fix for this urgently, you'll first need to open the JS file that initializes your table, in this example, it's located at theme/html/demo/js/custom/documentation/general/datatables/server-side.js

Then scroll to line 18 and you'll find this code snippet:

select: {
style: "os",
selector: "td:first-child",
className: "row-selected"
},


Replace that config with this:

select: {
style: "multi",
selector: "td:first-child input[type="checkbox"]",
className: "row-selected"
},


And you're good to go.



<a>

Firefox 96
Chrome 97

Windows 10



Hi,

Could you please provide us more info on how to reproduce this bug ? We were not able to reproduce this as you explained. Could you also please let us know your OS and Browser versions ?

Regards


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(