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

Adding multiple datatables to single page does not work correctly


I have added two datatables to one page and they show up fine, they sort fine ... but the search of the first one works but not the second one. Each table works fine if its the only table on the page, but not when together.

I have them functions:

var KTDatablesList = function ()
var KTDatablesList2 = function ()

Then tried to initialize at the same time

// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatablesList .init();
KTDatablesList2.init();
});

Each KTDatablesList - has its own distinct button names, field names .... so there was no issue with that.

Ive narrowed it down to the fact that when I enter something into the second text box, it only searches if the exact same value was entered into the first search box for the first datatable. I need a way to tell each datatable to use their own search boxes.

Would really appreciate your help solving this


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 (6)


Hi,

Please make sure that each table has a unique ID and that the js code in KTDatablesList and KTDatablesList2 refers to unique table ids. If the issue still persists please provide us more details, your Metronic version, and a screenshot of your console if there is any js error using https://imgur.com/.

Regards.



Each table has a unique id and there are no errors thrown when trying a search, it just does not work at all.

Do you have any examples of multiple tables on a page that has a search box for each?

I created these on separate pages and each one works as expected when separated, but when i try them both on one page, only the first table search box works. Everything else is fine, just cant search the second table.



I did the same example outside of the "metronics" theme and it worked fine, as expected. SO its something in the theme that is causing the issue with this search functionality.



Hi,

Sure, we will try to reproduce the issue on our end. May I know which Metronic version and demo you are using?

Can you provide both table's HTML and JS codes via https://gist.github.com we will debug your code and advise you further.

Regards.



Hello, sorry for the delay. After testing my code over and over I did find that it was the way I was initiating certain things and once I tweaked it a little, I got it working. Thanks for the help.



Hi,

Glad to hear that. If you need any further help please do let us know. All the best with your project.

Regards.


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  :(