如何使用jQuery分頁JSON數據？

重複：如何使用jQuery分頁JSON數據？

Good jquery pagination plugin to use with json Data…

我的JSON數據看起來像這樣

{ 
    "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" 
    }] 
}

有22條記錄在此JSON數據。如何使用jQuery將此JSON數據分頁到每頁5個？

編輯：

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

上述圖像是僱員列表的我的概要視圖使用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'); 
    }

我得到22條記錄。現在它可能會增長。如何使用jQuery分頁對JSON數據進行分頁？

來源

2010-03-24 Chendur Pandian

的可能重複http://stackoverflow.com/questions/2505435/good- jquery-pagination-plugin-to-use-with-json-data – Randolpho 2010-03-30 15:25:14

這裏有一個很好的教程：www.youtube。com/phpapplied – Norse 2012-11-09 19:18:24

'重複'塊中的第一個鏈接不可用，我認爲它應該被刪除。 – raeno 2014-05-17 04:35:06

你必須更具體地說明你的意思是「每頁5個」。你打算將這些數據渲染爲HTML「頁面」嗎？

如果是這樣，你需要將數據分成5組，使其..

來源

2010-03-24 13:12:02 mkoryak

@mkoryak看到我的編輯... – 2010-03-24 15:54:05

您的編輯並沒有使事情變得可能downvote我：P – mkoryak 2011-01-17 01:04:09

如果是JSONObject的JSON對象，然後

jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]

將在第一頁的對象。你將如何處理頁面取決於你的應用程序。

來源

2010-03-24 13:12:46 kgiannakakis

@kgiannakakis看到我的編輯... – 2010-03-24 15:52:00

@kgiannakakis http://stackoverflow.com/questions/2521372/paging- through-recordsjson-data-using-jquery – 2010-03-26 07:13:38

jQgrid是一個偉大的jQuery插件，用來處理表格和分頁，它需要在JSON非常特殊的格式但是

來源

2010-03-24 13:17:46

您可以使用方法Array.splice的方法來創建你的陣列所需的大小的羣體：

// 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現在包含顯示頁面的記錄數組。重構出page = 1，並將其作爲參數，併爲recPerPage = 5做同樣的事情，你應該很好。您可以使用jQuery.each遍歷recordsToShow，並使用某種模板系統從每條記錄創建HTML元素。

您還應該添加某種檢查到startRec以確保起始記錄在邊界內。如果不是，則顯示第1頁，或向用戶顯示錯誤消息。

來源

2010-03-24 13:24:17 PatrikAkerstrand

@Machine請參閱我的編輯... – 2010-03-24 15:54:33

jQuery的JSON分頁演示https://jsfiddle.net/rijo/0kjow220/

HTML代碼

<div style="width:400px"> 
<table class="paginated"> 
    <thead> 
     <tr> 
      <th class="col">Play Id</th> 
      <th class="col">Question1</th> 
     </tr> 
    </thead> 
    <tbody id="myTable"> 
</tbody> 

</table> 
<span id="nextValue">next</span><br><span id="PreeValue">Pre</span> 
</div>

腳本代碼的簡單方式

$(document).ready(function(){ 
     var table = $('#myTable'); 
var b = [{"play_id":"1","question1":"135","q1r":"1","question2":"138","q2r":"1","question3":"","q3r":"0","question4":"","q4r":"0","total_point":"6","amount":"1.7","bet_amount":"10","winning_amount":"20","no_of_players":"10"},....] 
    var max_size=b.length; 
    var sta = 0; 
    var elements_per_page = 4; 
    var limit = elements_per_page; 
    goFun(sta,limit); 
    function goFun(sta,limit) { 
     for (var i =sta ; i < limit; i++) { 

     var $nr = $('<tr><td>A-' + b[i]['play_id'] + '</td><td>B-' + b[i]['question1'] + '</td></tr>'); 
     table.append($nr); 
     } 
     } 
     $('#nextValue').click(function(){ 

     var next = limit; 
     if(max_size>=next) { 
     limit = limit+elements_per_page; 
     table.empty(); 
     console.log(next +' -next- '+limit); 
     goFun(next,limit); 
     } 
     }); 
     $('#PreeValue').click(function(){ 
     var pre = limit-(2*elements_per_page); 
     if(pre>=0) { 
     limit = limit-elements_per_page; 
     console.log(pre +' -pre- '+limit); 
     table.empty(); 
     goFun(pre,limit); 
     } 
     }); 

    });

來源

2017-01-12 09:13:51 Rijo

如何使用jQuery分頁JSON數據？

回答

相關問題