Gute jQuery pagination plugin zu verwenden mit JSON-Daten

Ich bin auf der Suche nach einem guten jQuery pagination plugin zu verwenden in meiner aspx-Seite.

Habe ich die folgenden Parameter.
currentpage, pagesize, TotalRecords, NumberofPages. Ich möchte mein plugin, das gleiche zu tun wie Stack Overflow paging.

EDIT:
Es sollte den Umbruch durch JSON-Daten.

Ähnlich wie diese,

Ich meine JSON-Daten und die Iteration mit jQuery

var jsonObj = jQuery.parseJSON(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');
    }

Gibt es 25 divs in der Seite meine. Als ein Ergebnis, wie zeige ich die ersten fünf divs in der Seite 1 und so weiter?

Meine HfJsonValue enthält die folgenden json-Daten

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

Finden Sie weitere Antworten zu duplizieren dieser Frage:

Wie jQuery verwenden zu paginieren JSON-Daten?

Diese Frage ist ein Duplikat [oder dupliziert werden, was auch immer :)]. Ich erläuterte, dass schon eine ganze Menge. siehe meine Antwort
mögliche Duplikate von Wie jQuery verwenden zu paginieren JSON-Daten?

InformationsquelleAutor bala3569 | 2010-03-24

11

Doppelte Frage, doppelte anwser...

Können Sie die jQuery Pagination plugin:

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

(Download hier)

Hier ist einer (von mehreren verschiedenen), wie können Sie das plugin nutzen.

Schritt 1: erstellen von markup aus deinem JSON-Daten wie die folgenden:
```
<div id="display">
    
</div>

<div id="hiddenData">
    
    <div class="record">
        
    </div>
    <div class="record">
    </div>
</div>
```
Die Idee ist, kopieren Sie den jeweiligen Eintrag, um die Anzeige div bei Klick auf eine Seite-link. Also, das plugin bietet eine pageSelect-callback-Funktion. Schritt 2 ist die Implementierung dieser Funktion, zum Beispiel:
```
function pageselectCallback(pageIndex, jq) {
    //Clone the record that should be displayed
    var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
    //Update the display container
    $('#display').empty().append(newContent);
    return false;
}
```
Dies würde bedeuten, dass Sie eine Seite pro Datensatz. Wenn Sie anzeigen möchten, mehrere Datensätze pro Seite, die Sie ändern müssen, um die obige Funktion entsprechend.

Der Dritte und Letzte Schritt ist die Initialisierung, die ganze Sache korrekt.
```
function initPagination() {
    //Hide the records... they shouldn't be displayed
    $("#hiddenData").css("display", "none");
    //Get the number of records
    var numEntries = $('#hiddenData div.result').length;
    //Create pagination element
    $("#pagination").pagination(numEntries, {
        num_edge_entries: 2,
        num_display_entries: 8, //number of page links displayed 
        callback: pageselectCallback,
        items_per_page: 1  //Adjust this value if you change the callback!
    });
}
```
So, Sie müssen nur zum generieren des HTML-markup und Ihre JSON-Daten und rufen die init-Funktion danach.
- Können Sie erklären, Wie man n-Anzahl der Paginierung in der gleichen Seite.
- Ich habe diese Frage beantwortet hier: stackoverflow.com/questions/2605053/...
- in initPagination Funktion es div.Datensatz statt div.Ergebnis, richtig?
- ich habe versucht, deinen code, aber ich habe diesen Fehler aus der jquery pagination-Funktion: "Sie, die Methode 8 existiert nicht auf jQuery.Paginierung",
InformationsquelleAutor Leo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.