Can DT make table data "overflow" into a second table?

ZaLiTHkA

I've got a situation here where I have a table with approximately 50 rows that I need to display in 2 (or more) tables, where rows 1-25 would be in table 1, rows 26-50 in table 2, rows 51-75 in table 3, etc.. My data is coming from an AJAX source (RESTful service in the backend), so I'll only know how many rows I'm working with once I get a response from the server.

The closest I've found in the existing plugins to cater for this would be the navigation with text input plugin, where each table could use a pre-populated hidden input field to specify the page to display. This should allow me to dynamically update the row ranges displayed based on the array of options I define for the lengthMenu property.

Another option could be to initiate multiple data tables, each with an AJAX call that limits the range of data returned to each table. But this way I'll need to make changes to the server side to allow limiting the data range as well as some fancy footwork to get a global table search feature implemented.

I haven't tested either theory just yet, since it looks like it may be quite complex to actually get it working properly.. However, I can't shake the feeling that there must be a better way to do this.. So before I go write up a bunch of UI manipulation code to handle the responsive style rules for an unknown number of tables, is there anything in DT or one of it's plugins that that caters for this sort of behaviour?

ZaLiTHkA

Just for reference, my current code (simplified a bit) is as follows:

var myDataTable = $('#table');

myDataTable.DataTable({
    ...
    ajax: {
        url: 'GetData',
        error: function (err) {
            console.error('error fetching data:', err);
        }
    },
    ...
});

setInterval(function () {
    myDataTable.ajax.reload(null, false);
    ...
}, 5000);

Now, from what I've learned in my research today, it looks as though I'd need to alter things in order to:

1. make my AJAX call to fetch the data
2. analyse the data to determine the number of rows and how they should be split
3. generate table elements and insert them into my page
4. finish off by calling myDataTable.DataTable({...}); on each of those tables

But if I did this, how would I ensure that the sorting doesn't get messed up when I refresh my source data? Using a data binding library for point 3 would update the source element in my page, but I'm not sure how this would affect DT... Would I need to destroy and recreate my fancy table, or could I simply call a myDataTable.draw(); to get it to update?

To ask a more pertinent question here: Am I heading down the right path here, or is there perhaps an easier route to take?

One benefit of this idea is the flexibility; there has been talk of not using tables for each data entry, but rather creating panels with information sorted and filtered with Masonry.. In this case, it should be pretty simple to replace DT without having to rewrite everything else, but then again I'd probably have to rewrite everything else to get to that point anyway..