Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Metronic 8 Datatable pagination with icons for 'prev' and 'next' buttons


Hello,
I coudn't find JS file example or documentation page about implementing Metronics pagination for use in Datatable.
I tried to add metronic classes to list item manually via JS which has all adjustments for DT data. I want to use <ul class="pagination pagination-outline"> which listed in your doc. page: https://preview.keenthemes.com/html/metronic/docs/base/pagination

Here is my example: http://usubaliev.com/satis
Below the table you can see I don't have <i> icons for 'prev' and 'next' buttons. They are just greather and less than signs.

How I can use your style in my DT table footer?

ps: I had to add classes manually [code]
---
"drawCallback": function () {// Add class KT Pagination class to DT pagination
var paginationUL = $('.paginate-outer ul.pagination');
paginationUL.addClass('pagination-outline compact');
}, etc...


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


Hi,

If you are using Datatables plugin you can refer to the docs here. The datatable plugin has its own built-in pagination. At the moment the datatable support only this default pagination style.

Metronic's simple pagination component is used for custom tables where you implement the pagination logic by yourself.

Regards.



Hi, it was so silly question happy
I had to change this:

"paginate": {
"previous": "&lt;",
"next": "&gt;"
}
to this:

paginate: {
previous: '<i class="previous"></i>',
next: '<i class="next"></i>'
}

// happy) Thank you. Have a good day.

PS: Now I'm posting another question related radio buttons in one row (inline). Why there is no example in your doc's for radio or checkboxes in a row, I'm trying to figure out that.



Hi happy,

Great work. Glad to hear that!

We have more advanced form examples here. Basically, you can use radios, switches, and checkboxes in any layout you need. If you provide us with more details we will guide you further.

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