CODEWITHSUNDEEP
jqueryjsonajaxjquery-jtable
Misha Akopov
Misha Akopov

Reputation: 13057

Jquery Jtable load Json from ajax call

I am using jtable.org-s library for showing rows in a table. For populating rows I used listAction like this:

actions: {
  listAction: '/Passengers/Search'
},

This URL returned valid json and everything worked fine. But I want to call the URL manually from ajax, because this URL returns more info than rows. It also returns info I need for other form elements, such as search result items count, woman/man ratio and etc.

So, I want to ajax call, and load the response to my jtable:

$.ajax({
  url: '/Passengers/Search',
  type: 'POST',
  data: {},
  success: function(data) {
    // here I would like to inject the Json(data) to my table
  }
});

Upvotes: 1

Views: 11385

Answers (2)

misterP
misterP

Reputation: 185

The answer suggested by abpatil is a good answer.

A simpler solution may be to use the jTable recordsLoaded event http://jtable.org/ApiReference/Events#event-recordsLoaded

The handler is given an event data object which has two components. data.records which is an array of all the records sent by the server, and data.serverResponse which is the full json response from the server.

You can loop through the records and process any extra fields.

The server can also send extra json properties not used by jTable and you can process the data.serverResponse here and use them in other page elements.

Upvotes: 1

abpatil
abpatil

Reputation: 914

You can use FunctionsAsActions feature of jquery-jtable.
In ajax success filter you can filter your response data and by using $dfd.resolve(data); you can load filtered data to jquery-jtable.
For example:

listAction: function (postData, jtParams) {
                    console.log("Loading from custom function...");
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: '/Demo/StudentList?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                            type: 'POST',
                            dataType: 'json',
                            data: postData,
                            success: function (data) {
                                //filter your data here and then pass filtered data to $dfd.resolve function

                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },

Upvotes: 0

Related Questions