0

I am trying to replace datatable Pagination "Previous" & "Next" with fa icons ( < , > ) but getting error "Cannot reinitialise DataTable."
I have searched for it and got the diagnosis as " DataTables provides a destroy() method to destroy an old table, so you would be able to initialise a new one in its place. "

"https://datatables.net/manual/tech-notes/3"

I used the following code it is working but my table is destroyed and again created.

$(document).ready(function () {
oTable = $('.pagination').dataTable({
    "ordering": true,
    "oLanguage": {
        "oPaginate": {
            "sNext": '<i class="fa fa-chevron-right" ></i>',
            "sPrevious": '<i class="fa fa-chevron-left" ></i>'
        }
    }
});

oTable.destroy(); });

Is there any other way to change the icons without destroying the old table object ?

2
  • Your code seems to work fine without destroying the table, at least in this fiddle: jsfiddle.net/h2x7mfh4. By the way, how do you populate your table with data? May 2, 2016 at 11:45
  • Hi , #ConstantineUA try this jsfiddle: [link] (jsfiddle.net/jackripper786/h2x7mfh4/2) in which an error is thrown that you cannot reinitialise Datatable. The solution to this is given on this link [link] (datatables.net/manual/tech-notes/3) but for this the old datatable has to be destroyed. Is there any way to change the pagination icons of the datatable without destroying the old table..... May 3, 2016 at 4:55

2 Answers 2

4

Well, I checked your link and saw the error message but it works exactly like it's explained in the documentation you've pointed on.

You create a datatable object with one set of parameters (lines 23-38) and than re-create it with the different one (lines 41-49). Datatable can't override parameters after initialization that's why that error is triggered. I'm curious, why do you need the second call, why can't you initialize a datatable object with the right pagination from the start?

Perhaps if you have to change pagination style after page creation, you could build your datatable object with both pagers and show/hide them depending on your conditions:

    oLanguage: {
        oPaginate: {
            sNext: '<span class="pagination-default">Next</span><span class="pagination-fa"><i class="fa fa-chevron-right" ></i></span>',
            sPrevious: '<span class="pagination-default">Prev</span><span class="pagination-fa"><i class="fa fa-chevron-left" ></i></span>'
        }
    }

http://jsfiddle.net/Lm8ob3jw/, but please be aware that pagination controls are re-rendered each time a user presses next/prev button.

2
  • yes #ConstantineUA you are right that "Datatable can't override parameters after initialization ". But I wanted to check if there is some way if it can be done. And the only solution to this is that you have to destroy the old table and then create a new one which i donot wanted to. So finally i made the changes to the datatable object during the first call. May 5, 2016 at 4:28
  • works like charm. but oLanguage: { oPaginate: { sNext: '>', sPrevious: '<' } } does the job fine. Jul 20, 2017 at 8:55
2

This worked for me:

$.extend(true, $.fn.dataTable.defaults.oLanguage.oPaginate, {
    sNext: '<i class="fa fa-chevron-right" ></i>',
    sPrevious: '<i class="fa fa-chevron-left" ></i>'
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.