How to use jQuery to paginate JSON data?

Question

Duplicate:

Good jquery pagination plugin to use with json Data…

My JSON data looks like this

{
    "Table": [{
        "Emp_Id": "3",
        "Identity_No": "",
        "Emp_Name": "Jerome",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Supervisior",
        "Desig_Description": "Supervisior of the Construction",
        "SalaryBasis": "Monthly",
        "FixedSalary": "25000.00"
    }, {
        "Emp_Id": "4",
        "Identity_No": "",
        "Emp_Name": "Mohan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Acc ",
        "Desig_Description": "Accountant",
        "SalaryBasis": "Monthly",
        "FixedSalary": "200.00"
    }, {
        "Emp_Id": "5",
        "Identity_No": "",
        "Emp_Name": "Murugan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "150.00"
    }, {
        "Emp_Id": "6",
        "Identity_No": "",
        "Emp_Name": "Ram",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "120.00"
    }, {
        "Emp_Id": "7",
        "Identity_No": "",
        "Emp_Name": "Raja",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "135.00"
    }, {
        "Emp_Id": "8",
        "Identity_No": "",
        "Emp_Name": "Raja kumar",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason Helper",
        "Desig_Description": "Mason Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "105.00"
    }, {
        "Emp_Id": "9",
        "Identity_No": "",
        "Emp_Name": "Lakshmi",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason Helper",
        "Desig_Description": "Mason Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "100.00"
    }, {
        "Emp_Id": "10",
        "Identity_No": "",
        "Emp_Name": "Palani",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Carpenter",
        "Desig_Description": "Carpenter",
        "SalaryBasis": "Weekly",
        "FixedSalary": "200.00"
    }, {
        "Emp_Id": "11",
        "Identity_No": "",
        "Emp_Name": "Annamalai",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Carpenter",
        "Desig_Description": "Carpenter",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "12",
        "Identity_No": "",
        "Emp_Name": "David",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Fixer",
        "Desig_Description": "Steel Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "13",
        "Identity_No": "",
        "Emp_Name": "Chandru",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Fixer",
        "Desig_Description": "Steel Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "14",
        "Identity_No": "",
        "Emp_Name": "Mani",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Helper",
        "Desig_Description": "Steel Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "175.00"
    }, {
        "Emp_Id": "15",
        "Identity_No": "",
        "Emp_Name": "Karthik",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Fixer",
        "Desig_Description": "Wood Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "195.00"
    }, {
        "Emp_Id": "16",
        "Identity_No": "",
        "Emp_Name": "Bala",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Fixer",
        "Desig_Description": "Wood Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "185.00"
    }, {
        "Emp_Id": "17",
        "Identity_No": "",
        "Emp_Name": "Tamil arasi",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Helper",
        "Desig_Description": "Wood Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "185.00"
    }, {
        "Emp_Id": "18",
        "Identity_No": "",
        "Emp_Name": "Perumal",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Cook",
        "Desig_Description": "Cook",
        "SalaryBasis": "Weekly",
        "FixedSalary": "105.00"
    }, {
        "Emp_Id": "19",
        "Identity_No": "",
        "Emp_Name": "Andiappan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Watchman",
        "Desig_Description": "Watchman",
        "SalaryBasis": "Weekly",
        "FixedSalary": "150.00"
    }]
}

There are 22 records in this JSON data. How to paginate this JSON data to 5 per page using jQuery?

EDIT:

alt text http://img218.imageshack.us/img218/7757/fivej.jpg

The above image is my summary view of employee list iterated using jQuery.

var jsonObj = JSON.parse(HfJsonValue);
    for (var i = jsonObj.Table.length - 1; i >= 0; i--) {
        var employee = jsonObj.Table[i];
        $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
    }

I get 22 records. Now it may grow. How to paginate the JSON data by using jQuery pagination?

Answer 1

You can use the Array.splice-method to create groups of the size you want from the array:

// Parse json etc.
var json = [...];
// Fetch the data for a page from the json-result object
var page = 1,
    recPerPage = 5,
    // Use Math.max to ensure that we at least start from record 0
    startRec = Math.max(page - 1, 0) * 5,
    // The end index of Array.splice doesn't have to be within boundaries,
    // But if you want to ensure that it does, then use 
    // Math.min(startRec + recPerPage, json.table.length)
    endRec = startRec + recPerPage
    recordsToShow = json.table.splice(startRec, endRec);

recordsToShow now contains an array of records to show for a page. Refactor out page = 1 and take it as a parameter, and do the same for recPerPage = 5, and you should be good to go. You can use jQuery.each to iterate through recordsToShow, and use some kind of templating system to create HTML-elements from each record.

You should also add some kind of check to startRec to ensure that the starting record is within boundaries. If it is not, then either display page 1, or display an error message to the user.

Answer 2

jQgrid is a great jQuery plugin for handling tables and paging, it requires json in a very specific format however