jq前端分页插件jqgrid

1.写div

<div class="ibox-content">
<div class="jqGrid_wrapper">
<!-- jqGrid数据列表    开始-->
<table id="table_list_1"></table>
<!-- jqGrid数据列表    结束-->
<!-- jqGrid翻页导航栏    开始-->
<div id="pager_list_1"></div>
<!-- jqGrid翻页导航栏    结束-->
</div>
</div>

2.引用js，css

<link href="${pageContext.request.contextPath}/css/plugins/jqgrid/ui.jqgridffe4.css?0820" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="${pageContext.request.contextPath}/js/plugins/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>

3.写js

$(function() {
$.jgrid.defaults.styleUI = "Bootstrap";  //指定表格使用样式风格,不可修改
$("#table_list_1").jqGrid({
       url:'${pageContext.request.contextPath}/roleController/list',//获取数据的地址,需修改  
       mtype : "POST",  
       contentType : "application/json",  
       datatype : "json",
       page : 1,
       autowidth: true,                       //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度
       shrinkToFit: true,                     //此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
       rownumbers: true,                      //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.
       rowNum: 10,                            //在grid上显示记录条数，这个参数是要被传递到后台
       rowList: [10, 20, 30],              //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
       colNames: ["角色名称" , "角色代码", "创建时间","创建人" ,"修改人","修改时间","状态" ,"操作"],//列显示名称，是一个数组对象,需修改
       cellEdit : false,                      //启用或者禁用单元格编辑功能,可修改
       colModel: [//常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
  {name: "fRoleName",index: "fRoleName",sortable :false},
  {name: "fRoleCode",index: "fRoleCode",sortable :false},
  {name: "fCreateTime",index: "fCreateTime"},
  {name: "fCreator",index: "fCreator",sortable :false},
  {name: "fModifier",index: "fModifier",sortable :false},
  {name: "fModifiedTime",index: "fModifiedTime"},
  {name: "fSysFlag",index: "fSysFlag",sortable :false,formatter:function(cellvalue, options, rowObject){
   if(cellvalue=='1')return '<span style="color:green">有效</span>';
   else if(cellvalue=='0')return '<span style="color:red">无效</span>';
   else return '';
  }},
  {name: "fRoleId",index: "fRoleId", sortable :false, formatter:function(cellvalue, options, rowObject){
  return ['<button type="button" class="btn btn-outline btn-default btn-xs btn-edit" data-id="'+cellvalue+'" title="编辑" ><i class="glyphicon glyphicon-edit" aria-hidden="true"></i></button><button type="button" class="btn btn-outline btn-default btn-xs btn-del" data-id="'+cellvalue+'" title="删除"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>'].join('');
  }}],
       pager: "#pager_list_1",              //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置,可修改
       viewrecords: true,                   //是否要显示总记录数,可修改
       caption: "角色管理",                         //表格名称,可修改
       hidegrid: false,                     //启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效,可修改
       multiselect: true,                   //定义是否可以多选,可修改
       multiboxonly:true,                   //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用,可修改
       jsonReader: {                        //描述json 数据格式的数组,需修改
         root: 'list',
    page: "current",                   // json中代表当前页码的数据
    total: "pages",    // json中代表页码总数的数据
    records: "total",// json中代表数据行总数的数据
    repeatitems: false,             // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
    cell: "cell",
    id: "fRoleId",
    userdata: "userdata",
   },onSelectRow: function(id){        //当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
   
       },gridComplete:function(){          //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
         //返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，value为所在行的列的值，如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据，它得到的并不是编辑后的值
         var rowData=$("#table_list_1").jqGrid("getRowData");
         //角色添加
         $('#roleadd').click(function () { 
             layer.open({
             type: 2,
             title: '角色添加',
                shadeClose: true,
                shade: 0.8,
                area: ['850px', '400px'],
                content: 'role-add' 
             }); 
             });
         if(rowData.length>0){
         //选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow，onselectrow默认为ture
         $("#table_list_1").setSelection(rowData[0].id);
         //搜索功能
         $("#rolefind").click(function() {
            $("#table_list_1").jqGrid('searchGrid', {
             multipleSearch:false,
             multipleGroup:false,
              /* sopt : [ 'cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew' ] */
            });
         });
         $("#rolerepeat").click(function() {
/*            $("input[name='fRoleName']").val("");
                $("#table_list_1").jqGrid('setGridParam',{  
                    datatype:'json',  
                    postData:{'searchString':''}, //发送数据  
                    page:1  
                }).trigger("reloadGrid"); //重新载入  */
         window.location.reload();
            });
         //批量删除
         $("#roledelmore").click(function(){  
                   var rowDelData = jQuery('#table_list_1').jqGrid('getGridParam','selarrrow');  
                   if(rowDelData.length > 0){  
                       var ids = "";  
                       for(var i=0;i<rowDelData.length;i++){  
                           //mainId是colModel中的一属性  
                           console.log(rowDelData[i]);
                           var mainId = rowDelData[i];  
                           if(ids != ""){  
                               ids = ids + "," + mainId;  
                           }else{  
                           ids = mainId;  
                           }  
                       }  
             layer.confirm('确认要删除吗？',function(index){
             $.ajax({
                         type: "POST",
                         url: "${pageContext.request.contextPath}/roleController/delmore",
                         data: {fRolemore:ids},
                         dataType: "json",
                         async:false, 
                         success: function(data){
                         if(data.success){
                          layer.msg('已删除!',{icon:1,time:1500});
                          setTimeout(function () { 
                          $("#table_list_1").trigger("reloadGrid");
                          }, 1500);    
                         }else{
                        layer.msg('操作失败!',{icon:1,time:1500});
                     } 
                         }
                  });
               }); 
                       //$.jqgridDeleteButtonClick(pageGrid.gridName,pageGrid.searchParameters,deleteUrl)  
                   }else{  
                   layer.msg('请选择需要删除的记录！!',{icon:1,time:1500});
                   }  
               }); 
         //角色修改
             $('.btn-edit').click(function () {
             var dataid=$(this).data("id");
             layer.open({
                type: 2,
                title: '角色修改',
                shadeClose: true,
                shade: 0.8,
                area: ['850px', '400px'],
                content: 'role-up?fRoleId='+dataid 
             }); 
             });
         //角色删除
            $('.btn-del').click(function () { 
            var dataid=$(this).data("id");
             layer.confirm('确认要删除吗？',function(index){
             $.ajax({
                         type: "POST",
                         url: "${pageContext.request.contextPath}/roleController/del",
                         data: {fRoleId:dataid},
                         dataType: "json",
                         async:false, 
                         success: function(data){
                         if(data.success){
                          layer.msg('已删除!',{icon:1,time:1500});
                          setTimeout(function () { 
                          $("#table_list_1").trigger("reloadGrid");
                          }, 1500);    
                         }else{
                        layer.msg('操作失败!',{icon:1,time:1500});
                     } 
                         }
                  });
               });
             });
         }
       }     
   }); 
});

源码：

效果图：