Datatable, statesave and ajax call

by Lucas Renaud

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="http://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<link rel="stylesheet" href="http://www.datatables.net/release-datatables/media/css/jquery.dataTables.css">
<table id="test">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<div>&nbsp</div><div>&nbsp</div><div>&nbsp</div><div>&nbsp</div>

<table id="test2">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<div>&nbsp</div><div>&nbsp</div>

<button id="btn_search">Search simulation</button>

JavaScript

//ajax emulation
$.mockjax({
    url: '/test/1',
    responseTime: 200,
    responseText: {
        data: [{"col1": "col1","col3": "col3","col2": "col2"},
               {"col3": "col3","col1": "col1","col2": "col2"}]
    }
});

//ajax emulation
$.mockjax({
    url: '/test/2',
    responseTime: 200,
    responseText: {
        data: [["col1", "col2", "col3"],["col1", "col2", "col3"]]
    }
});

var $table = $('#test');
$table.dataTable({
    "sDom": 'Rrtpi',
    "stateSave": true,
	"stateDuration": -1,
    "serverSide": true,
    "sAjaxSource": "/test/1",

    "columns": [
         {data: "col1"},
         {data: "col2"},
         {data: "col3"}
     ]
});

var $table2 = $('#test2');
$table2.dataTable({
    "sDom": 'Rrtpi',
    "stateSave": true,
	"stateDuration": -1,
    "serverSide": true,
    "sAjaxSource": "/test/2"
});

$("#btn_search").click(function () {

    var dataTable = $table.api();
    dataTable.page(0).draw();
    var dataTable2 = $table2.api();
    dataTable2.page(0).draw();
});