Bootstrap的datatable控件
来源:互联网 发布:js实现点击图片放大 编辑:程序博客网 时间:2024/04/30 03:31
Datatable控件
使用非常简单,页面效果如下
首先,添加datatable控件的引用。
@*table控件*@ <link href="~/Content/BootStrap/frontmcoinquery/bootstrap-table.css" rel="stylesheet" /> <script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table.js"></script> <script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table-zh-CN.js"></script>
链接:http://pan.baidu.com/s/1hrUADco 密码:qx0e
页面代码,在适当的位置写一个标签即可
<table id="table"></table>
JavaScript代码
//初始化Table function InitTable() { var oTableInit = new Object(); datetime = document.getElementById('nowdate').value; //alert(datetime); //初始化Table $("#table").bootstrapTable('destroy'); $('#table').bootstrapTable({ url: '/DayDetails/QueryTableInfo', //请求后台的URL(*) method: 'get', //请求方式(*) //toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 //cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) //sortable: true, //是否启用排序 //sortOrder: "asc", //排序方式 queryParams: Search, //传递参数(*) sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) //search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 //strictSearch: true, //showColumns: true, //是否显示所有的列 //showRefresh: true, //是否显示刷新按钮 //minimumCountColumns: 1, //最少允许的列数 //clickToSelect: true, //是否启用点击选中行 height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 //uniqueId: "id", //每一行的唯一标识,一般为主键列 //showToggle: true, //是否显示详细视图和列表视图的切换按钮 //cardView: true, //是否显示详细视图 //detailView: false, //是否显示父子表 columns: [{ checkbox: true }, { field: 'quesType', title: '试题类别' }, { field: 'quesContent', title: '试题详情' }, { field: 'quesScore', title: '试题总分' }, { field: 'score', title: '用户得分' }] }); //参数传递 function Search() { var temp = { datetime: $("#nowdate").val(), }; return temp; }}
参数传递的问题,在queryParams后面写一个方法名,并在下面写一个方法,将需要传递的参数放到给方法中即可
queryParams: Search, //传递参数(*) //参数传递 function Search() { var temp = { datetime: $("#nowdate").val(), }; return temp; }
Datatable控件,使用的时候会有一个问题,就是第一次查询的时候,它会执行datatable初始化代码,调用Controller中的后台方法,显示查询的结果,但是,第二次点击查询的时候,就不会再走Controller了。
解决方法,datatable控件只能初始化一次,必须销毁之后,才能进行第二次初始化,否则只会响应一次,之后就不会再进行数据的重新加载。
销毁datatable控件的代码
$("#table").bootstrapTable('destroy');
0 0
- Bootstrap的datatable控件
- Bootstrap的Datatable详解
- DataTable控件的使用
- Bootstrap Datatable 简单的基本配置
- Bootstrap Datatable 简单的基本配置
- Bootstrap的表单控件
- 显示DataTable的 TreeView 控件
- bootstrap datatable使用详解
- bootstrap Datatable搜索
- Bootstrap datatable自适应宽度
- bootstrap的timepicker控件问题
- bootStrap日期控件的使用
- bootstrap日期控件的使用
- Bootstrap-fileinput控件的使用
- Asp.net:DataTable控件的使用
- C# ComboBox控件 与 DataTable 的绑定
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- [iOS开发]Xcode8.3兼容iOS10.3.1以及低版本Xcode调试高版本iOS系统
- Solr搜索引擎开发初试(2)(接"Lucene搜索引擎开发初试(1)")
- android 如何判断当前是否为飞行模式
- 恩布开源安卓手机IM,EntboostIM全新发布1.6.0版本
- 使用ls筛选某一天的文件
- Bootstrap的datatable控件
- 安卓侧滑之DrawerLayout
- vs环境下QT新建.ui文件无法自动生成ui_xxx.h
- SQL 大数据查询如何进行优化?
- 网络通信协议
- No rule to make target cocos2d/cocos/editor-support/cocostudio/CCActionFrame.cpp
- 计算机网络概述(二)
- 用位操作改变内存中的值
- 根据jks文件获取SHA1签名