jQuery EasyUI DataGrid -Ajout d'un composant de pagination

Cet exemple montre comment charger des données depuis le côté serveur et comment ajouter un composant de pagination au DataGrid.

Création du DataGrid

Pour charger des données depuis un serveur distant, vous devez définir la propriété 'url', et votre côté serveur doit renvoyer les données au format JSON. Consultez la documentation du DataGrid pour plus d'informations sur son format de données.

    <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
            url="datagrid2_getdata.php"
            title="Load Data" iconCls="icon-save"
            rownumbers="true" pagination="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" width="80" align="right">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="150">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

Nous définissons les colonnes du DataGrid et définissons la propriété 'pagination' sur true, ce qui générera une barre d'outils de pagination en bas du DataGrid. La pagination enverra deux paramètres au serveur :

  • page : numéro de page, commençant à 1.
  • lignes : nombre de lignes affichées par page.

Code côté serveur

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    // ...
    $rs = mysql_query("select count(*) from item");
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];
    
    $rs = mysql_query("select * from item limit $offset,$rows");
    
    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;
    
    echo json_encode($result);

Télécharger les exemples jQuery EasyUI

jeasyui-datagrid-datagrid2.zip

Autres extensions