利用bootstraptable展示数据,对数据进行排序分页等操作

简介: 利用bootstraptable展示数据,对数据进行排序分页等操作

今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结。

Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是一般的表格,分页、排序、查询都自带了,你就给他一个json数据就可以了。

接下来我们就看看怎么用:

  1. 先在页面中引入所需的js文件和css文件
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
  1. 在我们所需要展示数据的表格上价格id,或者class都可以,在这里我以id为例。
<table id="table"></table>
  1. 接下来就是给表格里面加数据了,我们可以在加载当前页面时利用ajax去请求控制器,查询所需要的数据,然后放在一个集合中,转换成json格式就可以了。
    下面是js中相关代码:
$(function () {
     caseTable();
    });
//加载数据
function caseTable() {
    $('#table').bootstrapTable({
        method: "get",      //提交方法
        striped: true,      //是否显示行间隔色
        cache:true,     //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性
        singleSelect: false,    //设置True 将禁止多选
        url: "/Home/GetAllAnJian",//查询的地址
        dataType: "json",     //服务器返回的数据类型
        pagination: true,       //是否分页  
        pageSize: 5,        //页大小
        pageNumber: 1,      //当前页
        search: false,        //显示搜索框
        contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
        queryParams:null,     //参数
        //    function (parms) {
        //    return {
        //        aid: $("#aid").val(),
        //    };
        //},
        columns: [
            
            {
                title: "案件编号",    //列标题
                field: 'aid',       //该列映射的data的参数名 
                align: 'center',      //水平对齐方式
                valign: 'middle',   //垂直对齐方式
                sortable: true      //是否排序
            },
            {
                title: '案件名称',
                field: 'aname',
                align: 'center',
                valign: 'middle',
                sortable: true
            },
            {
                title: '案件类型',
                field: 'atypename',
                align: 'center',
                valign: 'middle',
                sortable: true
            },
 {
                field: '',
                title: '操作',
                halign: 'center',
                align: 'center',
                width: '50px',      //宽度
                sortable: true,     //下面是单独加的按钮
                formatter: function (value,row,index) {
                    var e = '<button class="btn btn-primary" οnclick="tijiao(\'' + row.aid + '\')">提交</button>';
                    return e;
                },
            }]
    });
}
  1. 后台查询数据的代码(以asp mvc为例):
    控制器是:HomeController
    请求数据的方法:
//查询所有的案件信息
public JsonResult GetAllAnJian(string aid)
{
List<AnJian> anAll = (from a in entity.AnJian
  where a.astatename.Equals("新建")
  select a).ToList();
//将日期类型转换成string类型
for (int i = 0; i < anAll.Count; i++)
  {
  anAll[i].adate_formate = anAll[i].adate.ToString();
  }
  return Json(anAll, JsonRequestBehavior.AllowGet);
  }

下面是演示图(数据随便填的):

对了,另外结合layui使用更好用哦,时候不早了,明天在说结合layui使用的方法。


相关文章
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
593 0
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
193 0
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1055 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
|
JavaScript 前端开发 测试技术
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
140 0
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
|
JavaScript API
发送post请求渲染el-table,并实现搜索和分页功能
发送post请求渲染el-table,并实现搜索和分页功能
180 0
|
JSON 开发框架 前端开发
利用bootstraptable展示数据,对数据进行排序分页等操作
利用bootstraptable展示数据,对数据进行排序分页等操作
276 0
利用bootstraptable展示数据,对数据进行排序分页等操作
|
前端开发
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
574 0
Element ui 表格(Table)组件中前端实现数据分页和模糊查询
|
关系型数据库 MySQL
ES复杂查询-结果过滤, 排序,分页
ES复杂查询-结果过滤, 排序,分页
分页获取数据列表GetListByPage
分页获取数据列表GetListByPage
93 0
|
SQL 开发框架 JavaScript
渲染 index 页面新闻列表数据02|学习笔记
快速学习渲染 index 页面新闻列表数据02