Question

does anyone have an example of how to implement DataTables that uses both infinite scrolling (or scroller) with column re-ordering where all the data is NOT loaded when the table is initialized?

What happens is that our result set is so large we go back and forth between client and server via ajax to kep populating the table with more results. When you get the initial set of results, re-order columns, and then scroll to get more results of course the columns are in the original order because that is how the server is sending the data back.

what implementations have you seen or use?????
Examples would be great. I haven’t seen anything really showing my scenario.

Answer 1

You should use mData property in aoColumns settings. It allows you to re-order columns and populate your table with server data without any problem.

For example:

Initialization datatable:

 $('#example').dataTable( {
             "aoColumns":
              [ 
                {"mData": "column1" },
                {"mData": "column2" },
                {"mData": "column3" },  
              ],
             "bServerSide" : true,
             "sAjaxSource" : "url",
             "bScrollInfinite": true,
             "sScrollY": "200px",
             "sDom":'Rlfrtip',
 } );  

JSON from server:

{"aaData": [{"column1": 1, "column2": 2,"column3": 3}]}

It turns out that you are mapping data into columns