Buena paginación plugin de jQuery para usar con datos JSON

Question

Estoy buscando un buen complemento de paginación jQuery para usar en mi página aspx.

que tienen los siguientes parámetros. currentpage, pagesize, TotalRecords, NumberofPages. Me gustaría que mi complemento haga lo mismo que la paginación Stack Overflow.

EDITAR: Debe paginar a través de datos JSON.

similares a esta,

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

uso mis datos JSON y iterando con 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'); 
    } 

Hay 25 divs en mi página. Como resultado, ¿cómo muestro los primeros cinco div en la página 1 y así sucesivamente?

Mi HfJsonValue contiene los siguientes datos 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" 
    }] 
} 

Ver las respuestas adicionales para duplicar de esta pregunta:

How to use jQuery to paginate JSON data?

Answer 1

pregunta duplicado, duplicado anwser ...

Puede utilizar el plugin de jQuery Paginación:

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

(Descárgalo here)

---

Aquí es una manera (de varios diferentes) cómo se puede utilizar el plugin.

Paso 1: generan marcado desde sus JSON-datos como el siguiente:

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

La idea es copiar el registro correspondiente a la div pantalla al hacer clic en una página de vínculos. Por lo tanto, el complemento ofrece una función pageSelect-callback. Paso 2 es implementar esta función, por ejemplo:

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

Esto significa que usted tiene una página por cada registro. Si desea visualizar múltiples registros por página, debe modificar la función anterior en consecuencia.

El tercer y último paso es inicializar todo correctamente.

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

lo tanto, sólo tiene que generar el código HTML de sus datos JSON y llamar a la función init-después.