发布于 2017-03-07 11:07:53 | 159 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要介绍了BootStrap Table 分页后重新搜索问题的解决办法,自定义搜索且有分页功能,比如搜索产品名的功能。小编给大家带来了关键代码,非常不错,需要的朋友可以参考下

前提: 自定义搜索且有分页功能,比如搜索产品名的功能.

现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变.

按网上大部分说的:重新设置option就行了


$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

以上是解决不了这个问题。

正确做法是

$("#table").bootstrapTable('destroy');先要将table销毁,否则会保留上次加载的内容

TableObj.oTableInit();重新初使化表格。

代码如下所示:


<script type="text/javascript">
$(function () {
TableObj.oTableInit();
$("#btn_query").click(function () {
$("#tb_departments").bootstrapTable('destroy');
TableObj.oTableInit();
});
$("#btn_edit").click(function () {
$.messager.alert('提示', '请选择要删除的记录');
});
$("#btn_add").click(function () {
var actionUrl = "@Url.Action("_create")";
var param = {};
Tool.ShowModal(actionUrl, param, "新增");
})
});
var TableObj = {
//初始化Table
oTableInit: function () {
$('#tb_departments').bootstrapTable({
url: '/Department/GetDepartment', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
// queryParams: TableObj.queryParams(this), //传递参数(*)
queryParams: function (params) {
return {
PagedIndex: this.pageNumber,
PagedSize: this.pageSize,
DeptName: $("#txt_search_departmentname").val(),
};
},
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 5, //每页的记录行数(*)
pageList: [5, 10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "deptID", //每一行的唯一标识,一般为主键列
idField: 'deptID',
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
//field: 'deptID',
//field: 'deptID',
checkbox: true
},
{
field: 'DeptName',
title: '部门名称'
}, {
field: 'CreateBy',
title: '添加人'
}, {
field: 'CreateDT',
title: '添加日期',
formatter: function (val) {
return val == 'undefined' || !val ? '-' : val.formatterString(false);
}
}
]
});
}
};
//保存
function Save() {
Tool.SaveModal($('#tb_departments'));
}
</script>

以上所述是小编给大家介绍的BootStrap Table 分页后重新搜索问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!



相关阅读 :
BootStrap Table 分页后重新搜索问题的解决办法
Bootstrap table分页问题汇总
bootstrap table分页模板和获取表中的ID方法
关于Bootstrap弹出框无法调用问题的解决办法
BootStrap中Table分页插件使用详解
bootstrap-paginator 分页插件使用示例
Bootstrap Paginator分页插件使用方法详解
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
Angular ui.bootstrap.pagination分页
bootstrap表格分页实例讲解
bootstrap paginator分页前后台用法示例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务