Jquery Jtable load Json from ajax call

Question

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

misterP · Accepted Answer · 2018-03-19 12:47:31Z

1

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.

answered Mar 19, 2018 at 12:47

misterP

1857 bronze badges

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

Comments

abpatil · Accepted Answer · 2017-12-09 12:00:55Z

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

Collectives™ on Stack Overflow

Jquery Jtable load Json from ajax call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related