jquery 1.6 jgrid 分页 ejemlo - Javascript (1)

📌 相关文章

📜 jquery 1.6 jgrid 分页 ejemlo - Javascript (1)

📅 最后修改于: 2023-12-03 15:32:08.074000 🧑 作者: Mango

jQuery 1.6 jGrid 分页 Ejemplo

简介

jQuery 1.6 jGrid 是一个构建在 jQuery 上的数据表格插件，其提供了丰富的特性和可定制性，其中之一就是分页功能。

特性

支持 AJAX 数据源
支持本地数据源
支持多列排序
支持行编辑
支持列过滤
支持分页

使用方法

引入必要的 jQuery 和 jGrid 库文件，例如：

<head>
  <script src="https://code.jquery.com/jquery-1.6.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.min.css" />
</head>

在 HTML 页面中添加一个表格容器元素，例如：

<div id="myGrid"></div>

在 JavaScript 中配置和初始化 jGrid 表格，例如：

$(function() {
  $('#myGrid').jqGrid({
    url: 'myData.json',
    datatype: 'json',
    colNames: ['ID', '名称', '数量', '价格'],
    colModel: [
      {name:'id', index:'id', width:100, sorttype:'int'},
      {name:'name', index:'name', width:150, sortable:true},
      {name:'quantity', index:'quantity', width:100, sorttype:'int'},
      {name:'price', index:'price', width:100, sorttype:'float'}
    ],
    rowNum: 10,                  // 每页显示行数
    rowList: [10, 20, 30],       // 每页显示行数的下拉列表
    pager: '#myPager',           // 分页栏容器元素
    sortname: 'id',              // 初始排序列名
    sortorder: 'asc',            // 初始排序方式
    viewrecords: true,           // 是否显示总记录数和总页数
    caption: '我的数据表格'    // 表格标题
  });
});

Ejemplo

以下是一个简单的数据表格分页 Ejemplo：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jGrid 分页 Ejemplo</title>
  <script src="https://code.jquery.com/jquery-1.6.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.min.css" />
  <script>
    $(function() {
      $('#myGrid').jqGrid({
        url: 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json',
        datatype: 'json',
        colNames: ['日期', '国内生产总值'],
        colModel: [
          {name:'date', index:'date', width:100, sorttype:'date'},
          {name:'value', index:'value', width:200, sorttype:'float'}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#myPager',
        sortname: 'date',
        sortorder: 'asc',
        viewrecords: true,
        caption: '世界 GDP'
      });
    });
  </script>
</head>
<body>
  <h1>jGrid 分页 Ejemplo</h1>
  <table id="myGrid"></table>
  <div id="myPager"></div>
</body>
</html>

jGrid 分页 Ejemplo