Datatables page change callback

Question

I am using a function 'fnDrawCallback' for page change. It basically solves my purpose. The only thing is I have to specify that function when I am initializing dataTable object. Is there any way I can do it after initialization?

For Example: I am doing like this:

$("#tableID").dataTables({'fnDrawCallBack':functionName});

I want to do like this:

var oTable = $("#tableID").dataTables();
oTable.fnDrawCallback = functionName;    // or something like this

Solution:

oTable.aoDrawCallback.push(functionObj);
var functionObj = {
   fn: funtionName
};

I want to know is there a way I can specify that function after initializing dataTable object. — emphaticsunshine, Mar 02 '12 at 16:31
http://stackoverflow.com/questions/7407111/detect-page-change-on-datatable — trante, Nov 04 '13 at 08:49

score 19 · Accepted Answer · answered Mar 02 '12 at 18:17

19

You could access the internal data settings of DataTables to manipulate the draw callback array (aoDrawCallback, not fnDrawCallback internally - its an array since there can be multiple callbacks), or (and what I would suggest) you can add a 'draw' event listener:

var oTable = $("#tableID").dataTables();
$(oTable).bind( 'draw', functionName );

The events fired by DataTables are documented here: http://datatables.net/docs/DataTables/1.9.0/#summary_events

answered Mar 02 '12 at 18:17

Allan Jardine

5,303
5
30
34

Binding events is not working in the version of dataTables I am using. But thank you for a good suggestion. – emphaticsunshine Mar 02 '12 at 19:59
aoDrawCallback worked for me. I have to push an object in that array and your function should be a fn property of that function. – emphaticsunshine Mar 02 '12 at 20:05
Binding events $(oTable).bind() does seem to work with the newer versions 1.9.2+. – jjwdesign Jun 06 '13 at 21:37
This is wrong, you want to bind to 'page' not 'draw'. See my answer below for something working on the current (1.9.4) version. – Scott R. Frost Jun 19 '13 at 13:19
@ScottRFrost why is it wrong to bind to `draw` rather than `page`? From what I can tell, in 1.9.4 they both fire in exactly the same circumstances (i.e. upon page change but _not_ when the table is initially generated). The distinction is that `draw` fires **after** the table has been drawn, thus allowing for code that manipulates the just-drawn rows (e.g. binding event handlers) — `page` fires **before** the rows are drawn. Either can be more appropriate depending on the functionality required. – Ryan Williams Feb 27 '14 at 15:06
1

@RyanWilliams. draw is fired EVERY TIME the grid is redrawn, not just on paging events. Lots of other things will fire draw, so hooking a function there doesn't fit what OP was asking for. – Scott R. Frost Mar 07 '14 at 15:15

score 6 · Answer 2 · answered Oct 03 '12 at 13:53

6

IF you have a version greater than 1.8, you can use this to hit the page change events:

    $('#myTable').on('page', function () {...} );

Hope this helps!

answered Oct 03 '12 at 13:53

streetlight

5,968
13
62
101

In my case, I used "page.dt" but this only works on my third page for some reason. – Coded Container Aug 22 '17 at 17:58

score 1 · Answer 3 · answered Jun 19 '13 at 13:17

Rather than two separate calls, just add a .bind() prior to the .dataTable(), such as the following that runs a setMouseDown function whenever a page change occurs (including rendering the first page):

$('#myTable')
    .bind('page', setMouseDown())
    .dataTable( 
    { 
        bJQueryUI: true, 
        ... Other Init Stuff Here ... 
    });

score 1 · Answer 4 · answered Mar 02 '12 at 16:47

1

You probably saw this http://datatables.net/forums/discussion/2737/addchange-callback-after-initialization-or-else-clone-settings-to-re-build-table/p1

answered Mar 02 '12 at 16:47

elrado

4,960
1
17
15

This seems to work for people but they added "bRetrieve" in later versions. I have 1.6.2 version and they don't have bRetrieve in that. – emphaticsunshine Mar 02 '12 at 19:52

Datatables page change callback

4 Answers4