DataTables 2: Paging DOM only appears after the drawCallback

redfellow

Shouldn't the pager buttons be in DOM after the table has finished drawing? If not, is there any other callback we can use to know the buttons have appeared in DOM? Sorry if this has been asked before, but I couldn't find more info by searching apart from few mentions that indicated that they should be there after the drawCallback.

I need to run some code to add tooltips to the paging buttons and it all works fine with a setTimout, but generally speaking I dislike dirty fixes like that.

Example to reproduce

var table = $('#example').DataTable({
  drawCallback: function() {
      console.log("LEN AFTER DRAW:", $(".dt-paging-button.current").length)  
      setTimeout(function() {
        console.log("LEN AFTER DRAW +500ms:", $(".dt-paging-button.current").length)  
      }, 500);           
    }
});

See JS console @ https://live.datatables.net/ducucege/1/

Length is 0 but after a timeOut the button exists (1).

Edit: I also noticed that running columns.adjust() redraws the paging DOM. Isn't that a bit weird?

kthorngren

You probably should use initComplete which fires after the Datatable is ready. Updated test case:
https://live.datatables.net/dazaxece/1/edit

If its something you need to constantly update then add a draw event after Datatables initialization, like in the updated test case. Possibly place it in initComplete so the event doesn't fire before initialization in case of ajax loaded data.

Kevin

redfellow

initComplete for me fired too early, as I'm using serverside processing.

I was able to get around the issue by making sure I call my DOM manipulation function only after column.adjust() (as well as in afterDraw). That fixed problem for me without resorting to setTimeout.

I think it might be beneficial to have an event for the paging DOM changes.

The reason I went with DOM manipulation was that even though Buttons for the Export (CSV, Excel etc) supported attr and Paging itself similar via language options, I simply couldn't find a way to do that for the Paging Select itself.

But yay, I have tooltips now that mostly populate automatically from the aria-labels now.

kthorngren

initComplete for me fired too early, as I'm using serverside processing.

That shouldn't be an issue. This is from the initComplete docs:

It can often be useful to know when your table has fully been initialised, data loaded and drawn, particularly when using an ajax data source. In such a case, the table will complete its initial run before the data has been loaded (Ajax is asynchronous after all!) so this callback is provided to let you know when the data is fully loaded.

I updated my test case with server side processing and it works as expected.
https://live.datatables.net/dazaxece/2/edit

Possibly something else is happening on your page?

was able to get around the issue by making sure I call my DOM manipulation function only after column.adjust() (as well as in afterDraw)

Not sure why columns.adjust() would affect this timing and I'm not sure what afterDraw is.

Datatables 2 introduced ready() that allows setting up a function that will fire when Datatables is in the "ready state". Possibly this will work for you.

We can take a further look if you want to provide a test case showing what you are doing to see if there is a more optimal way.

Kevin

redfellow

You can see the Paging buttons DOM update on the fly, when you manually call columns.adjust() via JS console / in code.

Sorry, I mean't drawCallback, internally I've named the function that I call as afterDraw so it was a slip.

I'll try to create a test case (later this week) on live.datatables.net that's using serverside with ajax.dataSrc, ajax.data and both the callbacks and some way to demonstrate the issue. I'll also test the ready() API.

I'll reply here once I have a solid case to showcase.