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
– markpsmith, Commented Nov 17, 2015 at 11:42
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
– gDir, Commented Nov 17, 2015 at 11:54

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

0

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();
     }

 });

answered Nov 17, 2015 at 12:30

Harsh Sanghani

1,7421 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

markpsmith Over a year ago

How will the datatable be populated?

gDir Over a year ago

I've tried removing data attribute from initialization code but nothings changed. It persistently calling controller get action.

Harsh Sanghani Over a year ago

Then please check again that controller request initiated from where?

gDir Over a year ago

If I set serverSide property to true (in my case it should be false) datatable works as expected and never call any http post action method. But this time it calls to controller on adding rows at client :) Really interesting...

gDir Over a year ago

Unfortunately I have no solution yet

|

Collectives™ on Stack Overflow

JQuery DataTable prevent server calls in client mode

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related