Wie verwende ich jQuery, um JSON-Daten zu paginieren?

Duplizieren:Wie verwende ich jQuery, um JSON-Daten zu paginieren?

Good jquery pagination plugin to use with json Data…

Meine JSON-Daten wie folgt aussieht

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

Es 22 Datensätze in diesem JSON-Daten sind. Wie paginieren Sie diese JSON-Daten mit jQuery auf 5 pro Seite?

EDIT:

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

Das obige Bild ist meine Zusammenfassung Ansicht von Mitarbeiterliste mit jQuery iteriert.

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

Ich bekomme 22 Datensätze. Jetzt kann es wachsen. Wie paginieren Sie die JSON-Daten mithilfe der jQuery-Paginierung?

Quelle

2010-03-24 Chendur Pandian

möglich Duplikat http://stackoverflow.com/questions/2505435/good- jquery-pagination-plugin-to-use-mit-json-data – Randolpho

Es gibt ein gutes Tutorial hier: www.youtube.com/phpapplied – Norse

Erste Verknüpfung im 'Duplikat' Block ist nicht verfügbar, ich denke, es sollte entfernt werden. – raeno

Sie müssen genauer angeben, was Sie mit "5 pro Seite" meinen. Werden Sie diese Daten in HTML-Seiten rendern?

Wenn ja, müssen Sie die Daten in Gruppen von 5 und machen es spalten ..

Quelle

2010-03-24 13:12:02 mkoryak

@mkoryak siehe meine bearbeiten ... –

Ihre Bearbeitung macht es nicht in Ordnung, mich nach der Tat zu downvote: P – mkoryak

Wenn JSONObject das Objekt JSON ist, dann

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

werden die Objekte der ersten Seite sein. Was Sie mit den Seiten machen werden, hängt von Ihrer Anwendung ab.

Quelle

2010-03-24 13:12:46 kgiannakakis

@kkiannakakis siehe meine bearbeiten ... –

@kkiannakakis http://stackoverflow.com/questions/2521372/paging- through-recordsjson-data-using-jquery –

jQgrid ist ein großes jQuery-Plugin für Tabellen und Paging-Handhabung, erfordert es json in einem ganz bestimmten Format jedoch

Quelle

2010-03-24 13:17:46

Sie die Array.splice-Methode verwenden, können Gruppen von der Größe, die Sie aus dem Array erstellen möchten:

// 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 enthält nun eine Reihe von Datensätzen für eine Seite zu zeigen. Refactor out page = 1 und nehmen Sie es als Parameter, und machen Sie das gleiche für recPerPage = 5, und Sie sollten gut gehen. Sie können jQuery.each verwenden, um durch recordsToShow zu iterieren und eine Art von Templating-System zu verwenden, um HTML-Elemente aus jedem Datensatz zu erstellen.

Sie sollten auch eine Art von Überprüfung an startRec hinzufügen, um sicherzustellen, dass der Startdatensatz innerhalb der Grenzen liegt. Ist dies nicht der Fall, dann zeigen Sie entweder Seite 1 an oder zeigen Sie dem Benutzer eine Fehlermeldung an.

Quelle

2010-03-24 13:24:17 PatrikAkerstrand

@Machine sehe meine Bearbeitung ... –

einfache Art und Weise für JQuery JSON Paginierung Demo https://jsfiddle.net/rijo/0kjow220/

Html-Code

<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>

Script-Code

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

    });

Quelle

2017-01-12 09:13:51 Rijo

Wie verwende ich jQuery, um JSON-Daten zu paginieren?

Antwort

Verwandte Themen