Undermine2k Undermine2k - 4 days ago 5
jQuery Question

Datatables 1.10 reload ajax data

I'm using datatables 1.10 trying to change the AJAX source to reload new data from the server, however it keeps using the same URL does now change to the new url. Do I need to change the sSource too somehow I'm uncertain of what the issue is.

var oTable = $('#big_table').DataTable({
'bProcessing' : true,
'bServerSide' : true,
"sDom": '<"toolbar"lfr>tip<"F">R',

'sAjaxSource' : 'myServer/oldURL',
"columns": [],
'sPaginationType': 'full_numbers',
"aaSorting": [
[5, "desc"]
],
'bAutoWidth' : false,
'iDisplayLength': 15,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var rowCount = oTable.rows()[0].length;

// Update footer
$( api.column( 6 ).footer() ).html(
' ( Cards:'+ rowCount +')'
);
},


'fnServerData' : function(sSource, aoData, fnCallback)
{
$.ajax({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
});


Reload Data



$("#change").click( function()
{
oTable.ajax.url('myServer/newURL').load();
});


data loaded from
myServer/oldURL

Answer

I ran into the very same problem and found an easy solution. Just use a function that returns a global variable rather than a pure variable in your data section:

<script type="text/javascript">
    var cs = 0;
    var dtconfig = {
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "info": true,
        "ajax": {
            "url": "/JournalData",
            "data": {
                selectedStation: function () { return window.cs; }
            }
        },
        "columns": [
            { "data": "ValueDate" },
            { "data": "StationText" },
            { "data": "DataPointText" },
            { "data": "ValueText" },
        ],
        "aoColumnDefs": [
        {
            "aTargets": [0], //indexes of whatever columns you need to format
            "mRender": function (data, type, full) {
                if (data) {
                    var mDate = moment(data).local();
                    //return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
                    return (mDate && mDate.isValid()) ? moment(mDate).locale("de").format('DD.MM.YY HH:mm:ss') : "";
                    //return mDate.toLocaleString();
                }
                return "";
            }
        }
        ]
    };

    $(document).ready(function () {
        $('#PaJournal').dataTable(dtconfig);
    });

    function UpdateStationFilter(StationId) {
        cs = StationId;
        var table = $('#PaJournal').DataTable();
        table.ajax.reload();
    }
</script>

Now my DataTable reloads the desired data and does not stick to the initial value.

Comments