JQuery DataTable prevent server calls in client mode

Question

I'm trying to use DataTable in client side mode. I mean I want to make all data loading, row adding and deleting processes done in client (web browser).

I'm using following code to initialize DataTable and it loads table rows correnctly from complex class object (PriceItems). But during in initialize process it makes http post request to server. Why? How can I prevent this?

var pricesTable = $('#pricesTable').DataTable({
     data: viewModel.product.PriceItems,
     columns: [{
         data: 'Id',
         visible: false
     }, {
         data: 'Name'
     }, {
         data: 'Value'
     }, {
         data: 'CurrencySymbol'
     }, {
         data: 'UnitName'
     }],

     sort: false,
     processing: false,
     serverSide: false,
     deferLoading: 0,
     info: false,
     filter: false,
     lengthChange: false,

     fnInitComplete: function (oSettings, json) {
         $('#pricesTable tbody tr:eq(0)').click();
     }

 });

EDIT-1: If I use (serverSide: true) DataTable stops calling mvc controller!
EDIT-2: Data model populated at server side with the following code.

var viewModel = new ProductFormViewModel(@Html.Raw(Json.Encode(Model)));

Has 'Model' actually been populated when you pass it to the view? Just wondering if your query uses deferred execution and is trying to enumerate the result set at the point of datatable initialisation. — markpsmith
Model populated in edit ([HttpGet]) action of controller and controller pass it to the view. Part of view is $(document).ready(function () { var viewModel = new ProductFormViewModel(@Html.Raw(Json.Encode(Model))); } — gDir

Harsh Sanghani Harsh Sanghani · Accepted Answer · 2015-11-17T12:30:59

Removed data attribute from the initialization of datatable because it send request to that url, try following code .

var pricesTable = $('#pricesTable').DataTable({
     columns: [{
         data: 'Id',
         visible: false
     }, {
         data: 'Name'
     }, {
         data: 'Value'
     }, {
         data: 'CurrencySymbol'
     }, {
         data: 'UnitName'
     }],

     sort: false,
     processing: false,
     serverSide: false,
     deferLoading: 0,
     info: false,
     filter: false,
     lengthChange: false,

     fnInitComplete: function (oSettings, json) {
         $('#pricesTable tbody tr:eq(0)').click();
     }

 });

JQuery DataTable prevent server calls in client mode

1 Answers