bootstrap-table获取表格数据的多种方式

 更新时间:2023年10月10日 09:03:36   作者:程序修理员  
这篇文章主要介绍了bootstrap-table获取表格数据的多种方式,bootstrap-table获取值得两种方式,一种是通过data获取,一种是通过url获取,需要的朋友可以参考下

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

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="external nofollow"  rel="stylesheet"   />
< link href="...bootstrap-table/bootstrap-table.min.css" rel="external nofollow"  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>

到此这篇关于bootstrap-table获取表格数据的两种方式的文章就介绍到这了,更多相关bootstrap-table获取表格数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6中Symbol、Set和Map用法详解

    ES6中Symbol、Set和Map用法详解

    这篇文章主要介绍了ES6中Symbol、Set和Map用法,结合实例形式详细分析了ES6中Symbol、Set和Map的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-08-08
  • js按条件生成随机json:randomjson实现方法

    js按条件生成随机json:randomjson实现方法

    下面小编就为大家带来一篇js按条件生成随机json:randomjson实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • ES6中的迭代器、Generator函数及Generator函数的异步操作方法

    ES6中的迭代器、Generator函数及Generator函数的异步操作方法

    这篇文章主要介绍了ES6中的迭代器、Generator函数以及Generator函数的异步操作方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • input链接页面、打开新网页等等的具体实现

    input链接页面、打开新网页等等的具体实现

    input可以链接到某页、返回、打开新网页、打开无边框的新窗口等等,本文整理了一些,感兴趣的朋友可以参考下
    2013-12-12
  • uniapp地图组件(map)使用与遇到的一些问题总结

    uniapp地图组件(map)使用与遇到的一些问题总结

    uniapp是用vue.js开发所有前端应用的框架,开发人员只需要编写一套代码就可以发布到安卓、iOS、H5和小程序、快应用等平台,下面这篇文章主要给大家介绍了关于uniapp地图组件(map)使用与遇到的一些问题,需要的朋友可以参考下
    2022-07-07
  • 详解Javascript 基于长连接的服务框架问题

    详解Javascript 基于长连接的服务框架问题

    本文针对经常使用长连接进行消息收发的应答场景,采用 Websocket 长连接作为服务监听的对象,模拟了一套类 http 服务框架,通过实例代码介绍了Javascript 基于长连接的服务框架,需要的朋友可以参考下
    2022-07-07
  • tangram.js库实现js类的方式实例分析

    tangram.js库实现js类的方式实例分析

    这篇文章主要介绍了tangram.js库实现js类的方式,结合实例形式分析了tangram.js库实现类的创建、继承等相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • JS实现颜色动态淡化效果

    JS实现颜色动态淡化效果

    本文主要介绍了JS实现颜色动态淡化效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript内存机制之堆内存(Heap)与栈内存(Stack)详解

    JavaScript内存机制之堆内存(Heap)与栈内存(Stack)详解

    文章将JavaScript引擎中的内存分为栈和堆,详细描述了它们的特点、用途、管理方式和垃圾回收机制,通过代码实战演示了基本类型和引用类型的数据存储方式,并解释了闭包和内存泄漏的概念,总结了栈和堆的区别,提供了面试高频问题的回答方法,需要的朋友可以参考下
    2026-05-05
  • javascript文件加载管理简单实现方法

    javascript文件加载管理简单实现方法

    这篇文章主要介绍了javascript文件加载管理简单实现方法,可实现顺序加载所有js文件的功能,非常简单实用,需要的朋友可以参考下
    2015-07-07

最新评论