`
zhaoyanfangeye
  • 浏览: 124852 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Json初始化表格带分页

阅读更多
  转载地址:http://www.trirand.com/blog/jqgrid/jqgrid.html


...
<table id="list2"></table>
<div id="pager2"></div>
Java Scrpt code
...
jQuery("#list2").jqGrid({
   url:'server.php?q=2',
datatype: "json",
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   colModel:[
   {name:'id',index:'id', width:55},
   {name:'invdate',index:'invdate', width:90},
   {name:'name',index:'name asc, invdate', width:100},
   {name:'amount',index:'amount', width:80, align:"right"},
   {name:'tax',index:'tax', width:80, align:"right"},
   {name:'total',index:'total', width:80,align:"right"},
   {name:'note',index:'note', width:150, sortable:false}
   ],
   rowNum:10,
   rowList:[10,20,30],
   pager: '#pager2',
   sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
PHP with MySQL
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());

mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());

$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $responce->rows[$i]['id']=$row[id];
    $responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
    $i++;
}       
echo json_encode($responce);
0
1
分享到:
评论

相关推荐

    JqGrid 纯Json自带分页功能

    为了在JqGrid中实现自动分页,你需要在初始化JqGrid时设置相关的参数,如`datatype`(数据类型)、`url`(数据来源URL)、`pager`(分页控件ID)和`loadonce`(是否一次性加载所有数据)。例如: ```javascript $(...

    使用jquery实现表格动态分页

    2. **初始化表格**:接着,对表格元素应用`DataTable()`方法,设置分页相关的参数,如每页显示的记录数、分页样式等。 ```html $(document).ready(function() { $('#example').DataTable({ "pageLength": 10, //...

    jQuery json带分页的动态数据表格代码.zip

    2. **初始化DataTables**:然后,我们需要在JavaScript中初始化DataTables,指定Ajax数据源为JSON文件。例如: ```javascript $('#example').DataTable({ "ajax": "data.json", "columns": [ { "data": "column...

    jquery插件--表格分页

    2. 初始化表格:使用jQuery选择器找到需要分页的表格,并进行初始化,设置分页参数,如每页显示的行数、分页位置等。 3. 数据源处理:根据所选插件的不同,可能需要配置数据源。如果是Ajax获取数据,需设置URL和...

    jQuery实现json表格数据自动分页插件功能.zip

    总之,通过这个jQuery插件,开发者可以快速构建一个功能完善的、支持JSON数据的表格分页功能,提升Web应用的数据展示效率和用户体验。在实际项目中,可以根据需求进行定制,比如调整分页样式、添加搜索和排序功能,...

    layui+nicePage.js实现JSON自动表格分页代码.zip

    1. 初始化layui表格:使用layui的table模块初始化表格,定义列名、宽度等,并指定数据接口。例如: ```javascript layui.use('table', function(){ var table = layui.table; //渲染表格 table.render({ ...

    bootstrap和jQuery做带分页跳转的表格实例

    - 使用 Bootstrap Table 插件初始化表格,配置分页选项。 - 编写 jQuery 代码处理分页按钮的点击事件,更新表格内容。 - 如果需要,可以使用 AJAX 实现动态加载,即当用户切换页面时,向服务器发送请求获取新数据。 ...

    JSON自动分页代码.zip

    // 初始化表格 table.render({ elem: '#demo', url: url, // 数据接口 cols: cols, // 表格列配置 page: true // 开启分页 }); }); ``` 在这个例子中,我们首先引入layui和nicePage.js的资源,然后在...

    JSP页面表格初始化

    JSP页面中的JavaScript脚本初始化表格 #### 函数`doOnLoad()`的作用: 该函数主要负责在页面加载完成后执行一系列初始化操作,包括获取表单数据、设置表格属性等。 #### 关键步骤: - **获取表单值**:通过`...

    Layui调用json获取表格动态数据代码.zip

    通过查看源代码,我们可以学习如何初始化表格,设置列定义,以及如何配置数据请求。 1. 初始化表格:Layui的表格通常通过`layui.use('table', function(){...})`来引入并调用。在函数内部,我们可以使用`table....

    jQuery bootstrap带分页表格数据搜索筛选代码

    例如,使用 `$('table').DataTable()` 初始化 DataTables 插件,实现数据的加载和分页。 3. **DataTables 插件**:这是一个强大的 jQuery 插件,它提供了数据表格的高级功能,如分页、排序、搜索和过滤。在页面中...

    基于Jquery实现表格动态分页实现代码

    2. 初始化分页参数和状态。 3. 使用AJAX获取数据,根据返回的数据动态生成表格。 4. 绑定分页按钮的点击事件,根据用户操作更新分页状态并重新加载数据。 5. 处理分页大小更改的事件。 通过这种方式,你可以为任何...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    2. 在客户端设置分页参数并初始化表格。 3. 使用Ajax发送请求到服务器获取分页数据。 4. 服务器端处理请求,计算分页信息,返回Json数据。 5. 客户端接收到数据后更新表格,实现无刷新分页效果。 这种技术可以提高...

    jqgrid本地数据分页

    在JavaScript中,使用`$("#tableId").jqGrid()`方法初始化表格。这里`tableId`是之前创建的表格ID。 4. **设置参数** 初始化时需要配置一些参数,如列定义、分页参数等: - `colNames`:列的显示名称。 - `...

    jQuery json带分页的动态数据表格特效代码

    本实例——"jQuery json带分页的动态数据表格特效代码",旨在教你如何利用jQuery的datatables插件,通过AJAX从JSON数据源获取并展示数据,同时实现搜索、排序和分页功能。 首先,让我们详细了解jQuery的datatables...

    jquery+json 无刷新分页

    // 初始化页面 $(document).ready(function() { loadPage(1); // 加载第一页 }); ``` ### 5. 注意事项 - 确保前后端数据交互的安全性,避免SQL注入等问题。 - 考虑到性能,避免一次性加载大量数据,合理设置每页...

    Servlet+json+js(jquery)+jsp实现分页

    JSP也可以包含脚本元素和指令,用于处理服务器端逻辑,如初始化分页参数或处理用户提交的表单。 项目的具体步骤可能包括以下几点: 1. 用户访问页面,JSP渲染基本的HTML结构,包括空的表格和分页导航栏。 2. 用户...

    ajax 静态网页操作表格分页哦

    // 初始化表格 loadTable(1); // 分页按钮点击事件 document.querySelector('.pagination').addEventListener('click', function(e) { if (e.target.tagName.toLowerCase() === 'button') { var page = parseInt...

    Layui数据表格 前后端json数据接收的方法.docx

    JavaScript代码主要用于初始化表格,并监听相关事件。 ```javascript $(function(){ // 初始化表格 layui.use(['table','layer','form'], function(){ var table = layui.table; layer = layui.layer; form = ...

Global site tag (gtag.js) - Google Analytics