Bootstrap table的使用，与后台数据连接，可自动翻页（客户端翻页）

最新推荐文章于 2022-03-06 17:58:51 发布

阿星777

最新推荐文章于 2022-03-06 17:58:51 发布

阅读量6.6k

点赞数

分类专栏： web开发文章标签： bootstrap 前端开发

本文链接：https://blog.youkuaiyun.com/rishengcsdn/article/details/53669180

版权

web开发专栏收录该内容

11 篇文章

订阅专栏

项目源码下载上传于csdn：点击打开链接

参考文章：

http://blog.youkuaiyun.com/lzxadsl/article/details/49181127

原来的文章并没有实现后台程序，我试着改造了一下。用java实现了json数据传送和查询条件的动态数据。

界面效果如下：

运行环境JDK8，Tomcat8.5

Bootstrap版本： v3.3.7 (http://getbootstrap.com)

Bootstrap table控件版本：version: 1.11.0 https://github.com/wenzhixin/bootstrap-table/

参数介绍和说明参考官方网站：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

主要函数说明：

    //编辑表格
           $('#reportTable').bootstrapTable({
               method: 'post',
               editable:false,//开启编辑模式
               clickToSelect: true,
               columns: [             ], //表头和栏目数据定义
                url:'/bts/DataList', //请求数据的URL，例如：http://localhost:8080/bts/DataList
                dataType:'json', //服务器返回数据类型，
//                //contentType:'application/json', //发送服务器数据类型
//                ajaxOptions:'{"realname":"李四"}'   ,//提交ajax请求时的附加参数，可用参数列请查看http://api.jquery.com/jQuery.ajax.
//                cache: false,
                   pagination   : true,
                  pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 2,                       //每页的记录行数（*）
                    pageList: [2, 4, 8],        //可供选择的每页的行数（*）
               data : []
           });

后台数据实现是纯servlet，模拟一下json对象的数据。

方法如下：

protected void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {

       String queryStr=request.getParameter("realname");
       System.out.println("查询参数："+queryStr);
       String jsonRet = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0},"
               + "{\"realname\":\"李四\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"187907980@qq.com\",\"credit\":0},"
               + "{\"realname\":\"李6\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"187907980@qq.com\",\"credit\":0},"
               + "{\"realname\":\"李7\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"187907980@qq.com\",\"credit\":0},"
               + "{\"realname\":\"李8\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"187907980@qq.com\",\"credit\":0},"
               + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"email2@sina.com\",\"credit\":0}]";

       String jsonRetQuery = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0},"
                           + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"email2@sina.com\",\"credit\":0}]";
       if(queryStr==null || ("").equals(queryStr)){
           resposWrite(response, jsonRet);
       }else{
           resposWrite(response, jsonRetQuery); //条件查询，记录变少了
       }
   }

后记:

getRowByUniqueId

Get data from table, the row that contains the id passed by parameter: $table.bootstrapTable('getRowByUniqueId', 1);

这个方法必须设置表格的唯一主键。

formatter注意问题：如果参数为纯数字而且又超级长，则会有精度问题，传到js中会损失掉后面的数据，必须强制加上\‘，将参数变成字符串才可以正确。

                                        formatter : function(value, row,
                                                rowIndex) {
                                            
                                            var strHtml = '<a href="javascript:void(0);" οnclick="modyRow('
                                                    + value
                                                    + ')">详情</a> &nbsp;<a href="javascript:void(0);" οnclick="grayMdy(\''
                                                    + value +'\')">加入灰名单</a>&nbsp;<a href="javascript:void(0);" οnclick="removeRow('
                                                    + value + ')">加入白名单</a>';
                                            return strHtml;
                                        },

==========================================================================

以上方式为JS翻页，client处理翻页数据，下面给出服务器翻页额例子，红字部分是必需注意的参数，注意服务器返回数据必需包含total，rows两个参数内容：

js：

        //编辑表格
       $('#reportTable').bootstrapTable({
           method : 'post',
           editable : false,//开启编辑模式
           clickToSelect : true,
           columns : [
           [           {
               field : "user_id",
               edit : false,
               title : "主键",
               visible : false, //隐藏列
               align : "center"

           }, {
               field : "realname",
               edit : false,
               title : "姓名",
               align : "center",
               width : "100px"
           }, {
               field : "card_id",
               title : "身份证号",
               align : "left",
               width : "166px"
           }, {
               field : "phone",
               title : "手机号码",
               align : "left",
               width : "115px"
           }, {
               field : "email",
               title : "邮箱",
               align : "left",
               width : "160px"
           },
           {
               field : "memo",
               title : "备注",
               align : "left",
               width : "200px"
           },
           {
               field : "statusEcho",
               title : "工作状态",
               align : "center"
           },
           {
               field : "second_statusEcho",
               title : "是否停用",
               visible : false, //隐藏列
               align : "center"
           },
           {
               field : "user_id",
               title : "操作",
               align : "center",
               formatter : function(value, row,
                       rowIndex) {
                   var sEcho=row.statusEcho;
                   var butText='';
                   if(sEcho=='启用'){
                       butText='停用';
                   }else if(sEcho=='停用'){
                       butText='启用';
                   }
                   var strHtml = '<a href="javascript:void(0);" οnclick="queryDetail(\''
                           + value +'\')" class="td-btn">查看</a> <a href="javascript:void(0);" οnclick="queryMdy(\''
                           + value + '\')" class="td-btn">修改</a> <a href="javascript:void(0);" οnclick="stopUser(\''
                               + value + '\')" class="td-btn">'+butText+'</a>';
                   return strHtml;
               },
               edit : false
           } ] ],
           url : GRCpre + "/apiBack/userList2.do", //请求数据的URL，例如：http://localhost:8080/bts/DataList
           dataType : 'json', //服务器返回数据类型，
           contentType:'application/x-www-form-urlencoded; charset=UTF-8', //发送服务器数据类型
           //                ajaxOptions:'{"realname":"李四"}'   ,//提交ajax请求时的附加参数，可用参数列请查看http://api.jquery.com/jQuery.ajax.
           cache: false,
            queryParamsType:'', //默认值为 'limit' ,在默认情况下传给服务端的参数为：offset(记录指针),limit（每页条数）,sort
            // 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
                            查询参数,每次调用是会带上这个参数，可自定义
            queryParams : function(params){
                 var state = $('#state option:selected').val();
                 var querC = $('#querC').val();
                 alert(params);
                 return {
                     // pageNumber: params.offset+1,
                     // pageSize: params.limit,
                       pageNumber: params.pageNumber,
                       pageSize: params.pageSize,
                       state:state,
                       querC:querC
                     };
             },
             //分页方式：client客户端分页，server服务端分页（*）
            sidePagination: "server",
           pagination : true,
           pageNumber : 1, //初始化加载第一页，默认第一页
           pageSize : 2, //每页的记录行数（*）
           //pageList : [ 10 ], //可供选择的每页的行数（*）
           data : []
       });

   });

    /**
   自定义查询按钮
   */
   function queryTab() {
       var jsonuserinfo = $("#form1").serialize();
       jQuery.ajax({
           type : "POST",
           url : GRCpre+"/apiBack/credit/imp/getList3.do",
           data : jsonuserinfo,
           dataType : 'json',
           success : function(result) {
               var retCode = result.RespCode;

               if (retCode == '000') {
                   var listJson = result.rows;
                   //alert(listJson);
                   $('#reportTable').bootstrapTable('load', result);
               } else {
                   if (retCode == '400' || retCode == '401') {
                       logoutInfo(retCode);
                   }else{
                       alert(retCode+":"+result.RespDesc);
                   }
               }

           },
           error : function(jqXHR, textStatus, errorThrown) {
               /*弹出jqXHR对象的信息*/
               alert(jqXHR.responseText);
               alert(jqXHR.status);
//                alert(jqXHR.readyState);
//                alert(jqXHR.statusText);
//                /*弹出其他两个参数的信息*/
//                alert(textStatus);
//                alert(errorThrown);
           }
       });

       //alert(333);
   }

=====================================================================

java服务器代码部分：

    /**
   * 催收员列表查询
   */
   @ResponseBody
   @RequestMapping("apiBack/userList2.do")
   public HashMap<String, Object> userList2(HttpSession session,String querC,String state,Integer pageNumber,Integer pageSize) {
       HashMap<String, Object> retTable = new HashMap<String, Object>();
       System.out.println("pageNumber:"+pageNumber+"pageSize:"+pageSize);
       List<SquAduser> userList=colUsrService.userList(querC,state,pageNumber,pageSize);
       retTable.put("RespDesc", "成功！！");
       retTable.put("RespCode", "000");
       retTable.put("rows", userList);
       retTable.put("total",userList.size());
       return retTable;
   }

=============================================================================

与多选框联系使用

    $('#reportTable').bootstrapTable({
       method : 'post',
       editable : false,//开启编辑模式
       clickToSelect : false,
       columns : [
       [
           {


               checkbox: true

           },
           {
           field : "user_id",
           edit : false,
           title : "主键",
           visible : false, //隐藏列
           align : "center"

       },
       {
            //field: 'Number',//可不加
            title: '序号',//标题可不加
           align : "center",
           width : "132px",
            formatter: function (value, row, index) {
                return index+1;
            }
        }

。。。。。

        pagination : true,
       pageNumber : 1, //初始化加载第一页，默认第一页
       pageSize : 10, //每页的记录行数（*）
       pageList : [ 10 ], //可供选择的每页的行数（*）
       data : []
   });

});

增加红字部分配置，则会多出一栏多选框，并且支持全选和取消，JS部分获取选中项如下：

//显示新增
function addUser(){
var selectContent = $('#reportTable').bootstrapTable('getSelections'); //获得多项的行数据
alert(JSON.stringify(selectContent));
。。。。。

}

选中项会解析为一组json对象，包含多选的每一行数据：

例如：

[
    {
        "0": true,
        "user_id": 49,
        "username": "wuzhudan",
        "email": "",

        "logintime": 0,
        "last_ip": "",
        "last_time": 0,
        "status": 2,
        "statusEcho": "初始密码",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 1,
        "userTypeEcho": "1",
        "up_ip": null,
        "up_time": 1496801232,
        "card_id": "",
        "phone": "18613807256",
        "memo": "",

        "ipList": "*"
    },
    {
        "0": true,
        "user_id": 48,
        "username": "xnnc",
        "email": "",

        "logintime": 33,
        "last_ip": "0:0:0:0:0:0:0:1",
        "last_time": 1498110398,
        "status": 0,
        "statusEcho": "启用",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 1,
        "userTypeEcho": "1",
        "up_ip": "0:0:0:0:0:0:0:1",
        "up_time": 1498032156,
        "card_id": "",
        "phone": "15810001961",
        "memo": "",

        "ipList": "*"
    },
    {
        "0": true,
        "user_id": 47,
        "username": "qyjf",
        "email": "",

        "logintime": 195,
        "last_ip": "113.208.117.10",
        "last_time": 1499048783,
        "status": 0,
        "statusEcho": "启用",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 2,
        "userTypeEcho": "2",
        "up_ip": "0:0:0:0:0:0:0:1",
        "up_time": 1499048115,
        "card_id": "",
        "phone": "17715611687",
        "memo": "",

        "ipList": "*"
    }
]