«

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

发布于 2018-11-14 15:53   2260 次阅读     

<!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>