Dobra wtyczka do paginacji jQuery do użycia z danymi JSON

Question

Poszukuję dobrej wtyczki do paginacji jQuery do użycia na mojej stronie aspx.

Mam następujące parametry. currentpage, pagesize, TotalRecords, NumberofPages. Chciałbym, aby moja wtyczka działała tak samo jak stronicowanie Stack Overflow.

EDYTOWANIE: Powinien on dokonać paginacji za pośrednictwem danych JSON.

podobne do tego,

pager http://img98.imageshack.us/img98/7278/pagersy.jpg

używam moich danych JSON i iteracji z 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'); 
    } 

Istnieje 25 DIV w mojej stronie. W rezultacie w jaki sposób wyświetlić pierwszych pięć elementów div na stronie 1 itd.?

My HfJsonValue zawiera następujące dane 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" 
    }] 
} 

zobaczyć dodatkowe odpowiedzi na duplikat to pytanie:

How to use jQuery to paginate JSON data?

Answer 1

zduplikowane pytanie, powielanie anwser ...

Można użyć wtyczki jQuery Paginację:

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

(ściągnąć here)

---

Oto jeden sposób (z kilku różnych) w jaki sposób można korzystać z wtyczki.

Krok 1: generowania znaczników od danych JSON jak poniżej:

<div id="display"> 
    <!-- This is the div where the visible page will be displayed --> 
</div> 

<div id="hiddenData"> 
    <!-- This is the div where you output your records --> 
    <div class="record"> 
     <!-- create one record-div for each record you have in your JSON data --> 
    </div> 
    <div class="record"> 
    </div> 
</div> 

Chodzi o to, aby skopiować odpowiedni zapis do div wyświetlanego po kliknięciu na stronę-link. Dlatego wtyczka oferuje funkcję wywołania zwrotnego pageSelect. Krok 2 jest wdrożenie tej funkcji, na przykład:

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

będzie to oznaczać, że masz jedną stronę na płycie. Jeśli chcesz wyświetlić wiele rekordów na stronę, musisz odpowiednio zmodyfikować powyższą funkcję.

Trzecim i ostatnim krokiem jest zainicjowanie całej rzeczy poprawnie.

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

Musisz więc wygenerować znaczniki HTML ze swoich danych JSON i wywołać później funkcję init.