jqgrid表格loca本地数据,实现翻页 jqgrid表格loca本地数据,实现翻页

jqgrid表格loca本地数据,实现翻页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
height: 100%;
}
body{
background:burlywood;
height: 100%;
}
#table{
width: 500px;
}
.jqgfirstrow{
height: auto;
}
.ui-jqgrid-pager {
    height: 50px!important;
}
</style>
<link rel="stylesheet" href="js/jqGrid/ui.jqgrid.css" />
<link rel="stylesheet" href="js/jqGrid/redmond/jquery-ui-1.8.16.custom.css" />
</head>
<body>
<div>
<table id="table" class="table"></table>
<div id="pager" class="pager"></div>
</div>
<button>点击选中</button>
</body>
<script src="js/jquery-1.11.0.js"></script> 
<script src="js/jqGrid/jquery.jqGrid.js"></script>
    <script src="js/jqGrid/grid.locale-cn.js"></script>
    <script>
    var mydata=[
        {name:"张三",sex:"男",id:"1"},
        {name:"张三",sex:"男1",id:"2"},
        {name:"张三",sex:"男2",id:"3"},
        {name:"张三",sex:"男3",id:"4"},
        {name:"张三",sex:"男4",id:"5"},
        {name:"张三",sex:"男",id:"6"},
        {name:"张三",sex:"男",id:"7"},
        {name:"张三",sex:"男",id:"8"},
        {name:"张三",sex:"男",id:"9"},
        {name:"张三",sex:"男",id:"10"},
        {name:"张三",sex:"男",id:"11"},
        {name:"张三",sex:"男",id:"12"},
        {name:"张三",sex:"男",id:"13"},
        {name:"张三",sex:"男",id:"14"},
        {name:"张三",sex:"男",id:"15"},
        {name:"张三",sex:"男",id:"16"},
        {name:"张三",sex:"男",id:"17"},
        {name:"张三",sex:"男",id:"18"},
        {name:"张三",sex:"男",id:"19"},
        {name:"张三",sex:"男",id:"20"},
        {name:"张三",sex:"男",id:"21"},
        {name:"张三",sex:"男",id:"22"},
        {name:"张三",sex:"男",id:"23"},
        {name:"张三",sex:"男",id:"24"},
        {name:"张三",sex:"男",id:"25"},
        {name:"张三",sex:"男",id:"26"},
        {name:"张三",sex:"男",id:"27"},
    ];
    var grid = $('#table').jqGrid({
  datatype: 'local',
  data: mydata,
  rownumbers: true,  //显示序列号
  multiselect: false, //单选
  colNames:["姓名","性别",""],
  colModel: [
    {
name: 'name',
index: 'name',
width: 200,
align: "center",
sortable: false
},
    {
name: 'sex',
index: 'sex',
width: 200,
align: "center",
sortable: false
},{
name:"id",
index: 'id',
hidden: true
}
  ],
  pager: "#pager",
  rowNum: 5,
  height: 230,
  autowidth: '100%'
}); 
// 为序号列添加标题
        $("#table").jqGrid('setLabel','rn', '序号', {'text-align':'center','vertical-align':'middle'},'');
        $("button").click(function(){
        var page=26%5==0?(26/5):(parseInt(26/5)+1);
        $("#table").setGridParam({page:page}).trigger("reloadGrid");
        $("#table").setSelection(26);
        });
       
    </script>
分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论