bootstrap-table获取表格数据de两种方式

亦凉 2024-02-18 21:33 42阅读 0赞

### 分享一下这两天的研究结果，超级有用 ###

bootstrap-table获取值得两种方式，一种是通过data获取，一种是通过url获取。  
data：适用于客户端分页；  
url：适用于服务端分页；  
\*注：上面两个的区别主要在于参数sidePagination。

--------------------

**1、通过data获取后台数据**

var result="通过el表达式获取json值";    //后台传过来的json值
     $(function () {
    load();
    }); 
    function load() {
    $("#table").bootstrapTable({
        data:result,
        //totalRows: 10,
        height:600,
        undefinedText:"_",           //当数据为 undefined 时显示的字符。
        sidePagination: 'client',
        pagination: true,             //是否显示分页（*）
        
    /* 右上角工具条 */
        showRefresh: true, //显示刷新按钮
        showToggle:true,        //是否显示详细视图和列表视图的切换按钮
        showColumns: true, //显示下拉框勾选要显示的列 
        
       pagination: true,   //在表格底部显示分页工具栏  
       striped: true,        //是否显示行间隔色
        pageNumber:1, //当前第几页 
        pageSize: 5, //每页显示的记录数 
        pageList: [5, 10, 15, 20, 25], //记录数可选列表 
        toolbar: "#toolbar",   //设置工具栏的Id或者class 
        paginationPreText:"<<",
        paginationNextText:">>",
       //clickToSelect: true,    //点击行即可选中单选/复选框 
        //iconSize: "outline", 
        //cardView: false,//设置为True时显示名片（card）布局 
        // singleSelect: true,//复选框只能选择一条记录
        search: true,    //是否显示右上角的搜索框  
        formatLoadingMessage: function () {  
            return "请稍等，正在加载中...";  
          }, 
        icons: {
            refresh: "glyphicon-repeat",
            toggle: "glyphicon-list-alt"
        },
        columns: [{
            field: 'id',
            visible: false   //不显示
        }, {
            field: 'empname',
            title: '用户名',
            align: 'left',
            //width: 230,
        } 
        , {
            field: 'empcode',
            title: '编码',
            align: 'left',
            //width: 230,
        } 
         
        ] 
      })
    }

2、通过url获取数据

function load() {
    $("#table").bootstrapTable({
        url: "${ctx}/userController/showlist",
        dataType:"json",
        method:"post",
     //totalRows: 10,   //记录右下角的总条数
        height:600,
        undefinedText:"_",           //当数据为 undefined 时显示的字符。
        sidePagination: 'client',
        pagination: true,             //是否显示分页（*）
        
      /* 右上角工具条 */
      showRefresh: true, //显示刷新按钮
     showToggle:true,        //是否显示详细视图和列表视图的切换按钮
     showColumns: true, //显示下拉框勾选要显示的列 
       pagination: true,   //在表格底部显示分页工具栏  
        striped: true,        //是否显示行间隔色
        pageNumber:1, //当前第几页 
        pageSize: 5, //每页显示的记录数 
        pageList: [5, 10, 15, 20, 25], //记录数可选列表 
        toolbar: "#toolbar",   //设置工具栏的Id或者class 
        paginationPreText:"<<",
        paginationNextText:">>",
       //clickToSelect: true,    //点击行即可选中单选/复选框 
        //iconSize: "outline", 
        //cardView: false,//设置为True时显示名片（card）布局 
        // singleSelect: true,//复选框只能选择一条记录
        search: true,    //是否显示右上角的搜索框  
        formatLoadingMessage: function () {  
            return "请稍等，正在加载中...";  
          }, 
        queryParams: function (params) {   //向后台传递的参数
            var p = {
                limit: params.limit,
                offset: params.offset,
                search: params.search,
                sort: params.sort,
                order: params.order
            };
            return p;
        }, 
        icons: {
            refresh: "glyphicon-repeat",
            toggle: "glyphicon-list-alt"
        },
        columns: [{
            field: 'id',
            visible: false   //不显示
        }, {
            field: 'empname',
            title: '用户名',
            align: 'left',
            //width: 230,
        } 
        , {
            field: 'empcode',
            title: '编码',
            align: 'left',
            //width: 230,
        } 
         
        ] 
     })
    }

**3、html页面部分代码**

< link href="...bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"   />
    < link href="...bootstrap-table/bootstrap-table.min.css" rel="stylesheet"  />
    
    < script src="...jquery-2.1.1/jquery.js" type="text/javascript" ></script>
    < script src="...bootstrap-3.3.7/js/bootstrap.js" type="text/javascript" ></script>
    < script src="...bootstrap-table/bootstrap-table.min.js" type="text/javascript" ></script>
    < script src="...bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" ></ script>
    
    < body>
    < div class="panel panel-default">
      < div class="panel-body">
    < div id="toolbar" class="btn-group">
    		< button id="btn_edit" type="button" class="btn btn-default">
    			< span class="glyphicon glyphicon-pencil" aria-hidden="true"></ span>修改
    		< /button>
    		<  button id="btn_delete" type="button" class="btn btn-default">
    			< span class="glyphicon glyphicon-remove" aria-hidden="true"></ span>删除
    		</ button>
    	</ div>     
    < table id="table"></table> 	
    </ div>
    </ div> 
    </ body>

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis获取参数的两种方式: #{ } 和 ${ }

Mybatis中获取参数值的两种方式：$\{\} 和 \\{\} $\{\}本质是字符串拼接 \\{\}本质是占位符赋值 1.1mapper接口方法的

╰半夏微凉°/ 2024年04月06日 14:04/ 0 赞/ 64 阅读

相关 bootstrap-table获取表格数据de两种方式

分享一下这两天的研究结果，超级有用 bootstrap-table获取值得两种方式，一种是通过data获取，一种是通过url获取。 data：适用于客户端分页；

亦凉/ 2024年02月18日 21:33/ 0 赞/ 43 阅读

相关 Java获取年月日的两种方式

方式一: Calendar calendar = Calendar.getInstance(); System.out.println(calendar.

痛定思痛。/ 2023年10月18日 08:53/ 0 赞/ 61 阅读

相关 SQL_删除表格数据的两种方式：delete和truncate的区别

注意：这里所说的删除表格数据是保留表结构的，如果删除表结构，则使用drop table ； 1. delete from emp; dml操作

我会带着你远行/ 2023年06月22日 08:30/ 0 赞/ 140 阅读

相关 bootstrapTable控制单选的两种方法

bootstrapTable控制单选的两种方法解决方法：主要有两种方法实现第一种：通过bootstrapTable属性来配置 singleSelect:tr

ゝ一世哀愁。/ 2023年03月03日 06:29/ 0 赞/ 7 阅读

相关 bootstrapTable 刷新（重新加载数据）的几种方式

项目中使用到了bootstrapTable ，根据条件查询数据，重新加载列表，有几种方式。直接看代码： $(function() { load();

Love The Way You Lie/ 2022年10月27日 12:28/ 0 赞/ 521 阅读

相关 Python获取当前工作目录两种方式

1.sys.arg\[0\]: import sys print(sys.argv\[0\])\当前脚本的位置 1 2 输出结果： G:/Pyt

爱被打了一巴掌/ 2022年10月07日 05:59/ 0 赞/ 281 阅读

相关 bootstrapTable 刷新（重新加载数据）的几种方式

bootstrap table 多次联系加载数据时候需要刷新加载数据，浏览器端才有显示变化，具体的实现方式有一下几种： // 方法1：刷新（重新加载数据）

痛定思痛。/ 2022年09月03日 08:29/ 0 赞/ 317 阅读

相关设置表格1px边框线的两种方式

![SouthEast][] 方式一使用 CSS属性 border-collapse, 合并单元格边框线 <!DOCT

偏执的太偏执、/ 2022年08月11日 05:29/ 0 赞/ 338 阅读

相关 mongodb数据迁移的两种方式

环境说明：bbs数据采集的数据越来越多，目前是50G，每天大概以200W的数据量增长。而当前服务器1.2上面的空间不足，需要把数据迁移到空间足够大的1.3上面去尝试

一时失言乱红尘/ 2022年08月09日 02:11/ 0 赞/ 667 阅读