jquery easyui datagrid分页，前台怎么对所有数据排序？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery easyui datagrid分页，前台怎么对所有数据排序？相关的知识，希望对你有一定的参考价值。
easyui对排序已经写好了的，你只要写上排序字段他会自动帮你排序，并且点击列名时会帮你用这个列排序的，是所有数据的，并不是针对当前页追问试了好多次了，都是当前页的有排序，而没有整合在一起排序
追答remoteSort你是设置false了吧！他排序其实还是去访问服务器排序完成后再显示，你不让他访问数据库当然不行
参考技术A 你参考一下jquery easyui datagrid的帮助文档 http://www.miniui.com/docs/api/index.html#ui=datagrid，这个里面有在前台排序的，比如：grid.sortBy("createtime", "desc");追问例子里的根据创建日期排序也是有向后台请求数据的
Jquery EasyUI datagrid后台数据表格生成及分页详解
由于项目原因，网站后台需要对用户信息进行各种操作，有时还需要进行批量操作，所以首先需要将用户信息展示出来，查了不少资料。发现Jquery EasyUI确实是一个不错的选择，功能强大，文档也比较全面，而且容易上手。今天就把自己在项目中用到的功能做了一个总结。生成数据表格如下所示:
接下来上代码
界面html及js代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>武侠小说人物</title> 6 <!--导入相关插件--> 7 <script src="easyui/jquery.min.js"></script> 8 <script src="easyui/jquery.easyui.min.js"></script> 9 <script src="easyui/plugins/jquery.datagrid.js"></script> 10 <script src="easyui/locale/easyui-lang-zh_CN.js"></script> 11 <link rel="stylesheet" href="easyui/themes/default/easyui.css"/> 12 <link rel="stylesheet" href="easyui/themes/icon.css"/> 13 </head> 14 <body> 15 <table id="mytb" style="width:200px;height:300px"> 16 17 </table> 18 <script type="text/javascript"> 19 $(\'#mytb\').datagrid({ 20 title: \'武侠小说人物\', //表格名称 21 iconCls: \'icon-edit\', //图标 22 width:480, //表格宽度 23 height:\'auto\', //表格高度，可指定高度，可自动 24 border:true, //表格是否显示边框 25 url:\'datagrid.php\', //获取表格数据时请求的地址 26 columns:[[ 27 {field:\'id\',title:\'编号\',width:100,hidden:false}, 28 {field:\'name\',title:\'姓名\',width:100}, 29 {field:\'age\',title:\'年龄\',width:100}, 30 {field:\'school\',title:\'江湖流派\',width:100} 31 ]], 32 pagination:true,//如果表格需要支持分页，必须设置该选项为true 33 pageSize:5, //表格中每页显示的行数 34 pageList:[5,10,15], 35 rownumbers:true, //是否显示行号 36 nowrap: false, 37 striped: true, //奇偶行是否使用不同的颜色 38 method:\'get\', //表格数据获取方式,请求地址是上面定义的url 39 sortName: \'ID\', //按照ID列的值排序 40 sortOrder: \'desc\', //使用倒序排序 41 idField: \'id\', 42 loadMsg:\'数据正在努力加载，请稍后...\', //加载数据时显示提示信息 43 frozenColumns: [[ //固定在表格左侧的栏 44 {field: \'ck\', checkbox: true}, 45 ]], 46 toolbar: [{ 47 text: \'添加\', 48 iconCls: \'icon-add\', 49 handler: function() { 50 getSelectIds(\'mytb\',\'没有选择\'); 51 } 52 }, \'-\', { 53 text: \'删除\', 54 iconCls: \'icon-cut\', 55 handler: function() { 56 getSelectIds(\'mytb\',\'没有选择\'); 57 } 58 }, \'-\', { 59 text: \'修改\', 60 iconCls: \'icon-save\', 61 handler: function() { 62 getSelectIds(\'mytb\',\'没有选择\'); 63 } 64 }] 65 }); 66 </script> 67 </body> 68 </html>
后台PHP获取数据代码
1 <?php 2 $link=mysql_connect(\'localhost\',\'root\',\'\'); //连接数据库获取数据 3 mysql_select_db(\'test\'); //选择数据库 4 mysql_set_charset(\'utf8\'); //设置字符集，包括result，server等字符集 5 //分页条件 6 $page=(isset($_GET[\'page\']))?intval($_GET[\'page\']):1; 7 $rows=(isset($_GET[\'rows\']))?intval($_GET[\'rows\']):10; 8 $offset=($page-1)*$rows; 9 $sql="select * from user limit $offset,$rows"; 10 $countnum="select count(*) as total from user";//查询数据总数 11 $res=mysql_query($sql); 12 $datanum=mysql_query($countnum); 13 $num=mysql_fetch_assoc($datanum); 14 $cdata=array(); 15 while($row=mysql_fetch_array($res)){ 16 $cdata[]=$row; 17 } 18 $data=array(); 19 foreach($cdata as $k=>$v){ 20 $data[\'rows\'][$k][\'id\']=$v[\'id\']; 21 $data[\'rows\'][$k][\'name\']=$v[\'name\']; 22 $data[\'rows\'][$k][\'age\']=$v[\'age\']; 23 $data[\'rows\'][$k][\'school\']=$v[\'school\']; 24 } 25 $data[\'total\']=$num[\'total\']; //总数必须要分配过去,分页需要 26 echo json_encode($data); 27 ?>
以上是关于jquery easyui datagrid分页，前台怎么对所有数据排序？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页