How to reload a datatable, with new parameters set by client.

liangtp

Good day,

After I created and displayed a datatable, I have a small window for client to specify a new location and new radius to filter a new set of data to be re-displayed.

After the client keyed in the new location and radius, he presses a REFRESH button. How shall I go about it? Do I call the function getJObs() again (twice)? If I did that the error message is "DataTables warning: table id=tblJobs - Cannot reinitialise DataTable".

My partial code below:

function getJobs(){
var data = {};
var memberId = null;
var cellContent='';
var ShowedDtl = [];
data.Operation = 'getJobs';
// data.lat = '2.864337'; //currently hardcode. these data to be used at server-side for processing and filtering
// data.lng = '101.67751509999994';
// data.radius = '10';

var dt = $('#tblJobs').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: "myCommonDL.php",
        data: data,
        dataSrc: function ( json ) {
            memberId = json.MemberId;
            if (!json.Success) {
                if (json.SessionExpired){
                    myDialog('Error', json.UserErrorMsg + json.ErrorMsg, true, 5, 'R', 200, window.my_global.WebSiteUrl);
                } else {
                    myDialog('Error', json.UserErrorMsg + json.ErrorMsg, true, 5, 'R', 200, '');
                }
            }
            return json.dataTable;
        }
    },
     "columns": [
        {
            class: "details-control-expand",
            orderable: false,
            data: "ExpandCol",
            defaultContent: ""
        },
        {
            orderable: false,
            data: "JobInfo",
            defaultContent: ""
        },
        {
            orderable: false,
            data: "LocationRate",
            defaultContent: ""
        },
        {
            orderable: false,
            data: "Requirement",
            defaultContent: ""
        },
        {
            orderable: true,
            data: "RecordCreationTimeStamp"
        },
        {
            orderable: false,
            data: "Address"
        },
        {
            orderable: false,
            data: "RecId"
        }            
    ],
     "order": [[ 4, "desc" ]],
     "columnDefs": [
        {
            "targets": [ 1 ],
            "searchable": false,
            "orderable" : false,
            render: function ( data, type, row, meta ) {
                cellContent = '<span class="postedtime">posted ' + timeAgo(row.HowLongAgo) + '</span><br />';
                cellContent += '<span class="jobNo">'+row.Views+' Views</span><br />';
                cellContent += '<span class="jobNo">'+row.JobNo+'</span>';
                return cellContent;
            }
        },