Bootstrap的datatable控件

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');

Bootstrap的datatable控件相关推荐

Bootstrap 表单控件的状态
在使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap提供了 4 种状态,分别是获得焦点状态.无效输入状态.禁用状态.验证状态,并为每 ...
Bootstrap 表单控件的尺寸
在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸. 1.让控件成为块级元素如果想让控件像块级元素一样占满容器,就可以为它添加 .in ...
Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
Bootstrap表单控件的尺寸
控件的尺寸在Bootstrap中,可以通过类似.input-lg的类为控件设置高度,类似.col-*的类为控件设置宽度. 1.高度尺寸一般情况下,控件的默认高度就能满足要求.当然,你也可以为控件添 ...
BootStrap中Affix控件的使用方法及如何保持布局的美观
Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候 ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;li ...
Bootstrap 表单的扩展控件
除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件. 输入框的前置和后置组件,是非常实用的控制控件.利用输入框的前置和后置组件,可以在输入框 ...

Bootstrap的datatable控件

Datatable控件

Bootstrap的datatable控件相关推荐

最新文章

热门文章