Comment utiliser jQuery pour paginer des données JSON?

double:Comment utiliser jQuery pour paginer des données JSON?

Good jquery pagination plugin to use with json Data…

Mes données JSON ressemble à ce

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

Il y a 22 fiches dans ces données JSON. Comment paginer ces données JSON à 5 par page en utilisant jQuery?

EDIT:

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

L'image ci-dessus est mon point de vue sommaire de la liste des employés à l'aide itérer 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'); 
    }

Je reçois 22 enregistrements. Maintenant, il peut grandir. Comment paginer les données JSON en utilisant la pagination jQuery?

Source

2010-03-24 Chendur Pandian

double possible de http://stackoverflow.com/questions/2505435/good- jquery-pagination-plugin-à-utiliser-avec-json-data – Randolpho

Il y a un bon tutoriel ici: www.youtube.com/phpapplied – Norse

Le premier lien du bloc 'duplicate' n'est pas disponible, je pense qu'il devrait être supprimé. – raeno

Vous devez être plus précis sur ce que vous entendez par "5 par page". Allez-vous rendre ces données aux "pages" HTML?

Si oui, vous devez diviser les données en groupes de 5 et le rendre ..

Source

2010-03-24 13:12:02 mkoryak

@ mkoryak voir mon edit ... –

votre édition ne le rend pas ok pour downvote moi après le fait: P – mkoryak

Si JSONObject est l'objet JSON, puis

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

seront les objets de la première page. Ce que vous ferez avec les pages dépend de votre application.

Source

2010-03-24 13:12:46 kgiannakakis

@ kgiannakakis voir mon edit ... –

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

jQgrid est un plugin jQuery pour gérer les tables et la pagination, il faut JSON dans un format très spécifique mais

Source

2010-03-24 13:17:46

Vous pouvez utiliser la Array.splice méthode pour créer des groupes de la taille que vous voulez à partir du tableau:

// 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 contient maintenant un tableau d'enregistrements pour afficher une page. Refactoriser page = 1 et le prendre comme un paramètre, et faire la même chose pour recPerPage = 5, et vous devriez être bon à faire. Vous pouvez utiliser jQuery.each pour parcourir recordsToShow et utiliser une sorte de système de création de modèles pour créer des éléments HTML à partir de chaque enregistrement.

Vous devez également ajouter une sorte de vérification à startRec pour vous assurer que l'enregistrement de départ se trouve dans les limites. Si ce n'est pas le cas, affichez la page 1 ou affichez un message d'erreur à l'utilisateur.

Source

2010-03-24 13:24:17 PatrikAkerstrand

@Machine voir mon edit ... –

façon simple pour JQuery JSON demo pagination https://jsfiddle.net/rijo/0kjow220/

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

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

    });

Source

2017-01-12 09:13:51 Rijo

Comment utiliser jQuery pour paginer des données JSON?

Répondre

Questions connexes