¿Cómo usar jQuery para paginar datos JSON?

duplicado:¿Cómo usar jQuery para paginar datos JSON?

Good jquery pagination plugin to use with json Data…

Mis datos JSON se parece a esto

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

hay 22 registros en estos datos JSON. ¿Cómo paginar esta información JSON a 5 por página usando jQuery?

EDIT:

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

La imagen de arriba es mi punto de vista resumen de lista de empleados itera usando 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'); 
    }

Obtengo 22 registros. Ahora puede crecer. ¿Cómo paginar los datos JSON utilizando la paginación jQuery?

Fuente

2010-03-24 Chendur Pandian

posible duplicado de http://stackoverflow.com/questions/2505435/good- jquery-pagination-plugin-to-use-with-json-data – Randolpho

Aquí hay un buen tutorial: www.youtube.com/phpapplied – Norse

El primer enlace en el bloque 'duplicado' no está disponible, creo que debería eliminarse. – raeno

Tienes que ser más específico sobre lo que quieres decir con "5 por página". ¿Va a mostrar estos datos en "páginas" HTML?

Si es así, es necesario dividir los datos en grupos de 5 y lo hacen ..

Fuente

2010-03-24 13:12:02 mkoryak

@mkoryak ver mi edición ... –

su edición no me permite rechazarme después del hecho: P – mkoryak

Si JSONObject es el objeto JSON, entonces

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

serán los objetos de la primera página. Lo que harás con las páginas depende de tu aplicación.

Fuente

2010-03-24 13:12:46 kgiannakakis

@kgiannakakis ver mi edición ... –

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

jQgrid es un gran plugin jQuery para el manejo de las tablas y de paginación, se requiere JSON en un formato muy específico embargo

Fuente

2010-03-24 13:17:46

Puede utilizar el Array.splice método para crear grupos del tamaño que desee de la matriz:

// 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 ahora contiene una tabla de registros que mostrar una página. Refactorice page = 1 y tómelo como parámetro, y haga lo mismo para recPerPage = 5, y debería estar listo para continuar. Puede usar jQuery.each para iterar a través del recordsToShow, y usar algún tipo de sistema de plantillas para crear elementos HTML de cada registro.

También debe agregar algún tipo de verificación al startRec para asegurarse de que el registro inicial esté dentro de los límites. De lo contrario, muestre la página 1 o muestre un mensaje de error al usuario.

Fuente

2010-03-24 13:24:17 PatrikAkerstrand

@Machine ver mi edición ... –

Una manera sencilla para jQuery JSON paginación demostración código 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>

código de script

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

    });

Fuente

2017-01-12 09:13:51 Rijo

¿Cómo usar jQuery para paginar datos JSON?

Respuesta

Cuestiones relacionadas