CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjquery-jtable
Shobhit Sharma
Shobhit Sharma

Reputation: 634

How to load JSON Data in jQuery-jTable plugin?

I am working on creating a table form using jTable plugin. It mainly focus for ASP or PHP MVC but I'm trying to implement it with javascript/html and mongo backend.

I went through entire jTable API documentation and I found out there is possibility of populating json schema api into table, quite similiar in flexigrid.

The code looks like:

 $(document).ready(function () {
          $('#feeds-table').jtable({
              title: 'Accounts',
              pageSize: 15,
              ajaxSettings: {
                  type: 'GET',
                  dataType: 'json'
              },
              actions: {

              },
              fields: {
                  id: {
                      key: true,
                      list: false
                  },
                  username: {
                      title: 'Username',
                      width: '10%'
                  },
                  email: {
                      title: 'Email',
                      width: '10%'
                  },
                  applications: {
                      title: 'Applications',
                      width: '10%'
                  },
                  sites: {
                      title: 'Sites',
                      width: '10%'
                  },
                  verticals: {
                      title: 'Verticals',
                      width: '10%'
                  },
                  roles: {
                      title: 'Roles',
                      width: '10%'
                  },
                  profiles: {
                      title: 'Record date',
                      width: '30%',
                      type: 'date',
                      create: false,
                      edit: false
                  }
              }
          });
      });

If anyone can help me to find out where should I use URL property or is there any other method in the API reference to GET the data and display in table. Please let me know!

Upvotes: 2

Views: 12837

Answers (2)

user2916183
user2916183

Reputation: 101

Use the addRecord action. It gives you the option to specify clientOnly: true which will prevent jtable from making a server call when you edit a row. More Information - jtable.org-addRecord

Upvotes: 0

izazueta
izazueta

Reputation: 38

You can directly load JSON data by setting the 'listAction' to a JSON document .

Example:

actions: {
  listAction: 'url/file.json',
},

Your JSON file needs to have the same fields specified and the next structure: 

{
 "Result":"OK",
   "Records":[
    {"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},
    {"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}
   ]
}

The common way is to point the 'listAction' to a server side script (PHP,ASP.NET...) that return the above JSON object.

Check the listAction API reference for more information: ApiReference-listAction

Upvotes: 1

Related Questions