Bootstrap分页查询
前台方法:
function show() {
$('#reportTable').bootstrapTable({
method: 'get',
url: "@Url.Action("GetList", "UserInfoFun")",
pagination: true,//分页
striped: false,
pageSize: 10,
pageNumber: 1,
minimumCountColumns: 1,
queryParamsType: 'count',
sidePagination: 'server',
dataType: 'json',
contentType: 'application/json',
idField: 'S_CASEID',
queryParams: getQueryParams
});
}
function getQueryParams(queryParams) {
var options = $("#reportTable").bootstrapTable('getOptions');
$.extend(options, queryParams);
var sortOrder = options.sortOrder == "desc" ? " asc" : " desc";
var sortName = options.sortName || "s_id";
var temp = $("#fm_doc").serializeJsonObject();
temp["pageIndex"] = (options.pageNumber - 1) * options.pageSize;
temp["pageSize"] = options.pageSize;
temp["sort"] = sortName + sortOrder;
return temp;
}
function formatterOperation(value, row, index) {
var str = "";
str += "<a href=\"javascript:void(0)\" onclick=\"Edit('" + row["Id"] + "')\"><span class='glyphicon glyphicon-pencil'></span>编辑</a> ";
str += "<a href=\"javascript:void(0)\" onclick=\"Delete('" + row["Id"] + "')\"><span class='glyphicon glyphicon-remove'></span>删除</a>";
return str;
}
function Delete(id) {
if (confirm("确认要删除用户吗?")) {
$.ajax({
url: "@Url.Action("Delete", "UserInfoFun")",
type: "post",
data: { id: id },
dataType: "json",
success: function (d) {
if (d.Success) {
alert("删除成功");
//doSearchByButton();
}
else {
alert(d.ErrorMsg);
}
}
});
}
}
function Edit(id) {
TopLayerInfo('编辑用户', '@Url.Action("AddUser", "UserInfo")?IsAdd=false&id=' + id + '', '55%', '50%');
}
前台Html:
<div class="base-table" id="tabDiv" style="height:600px;margin-left:10px">
<table id="reportTable" class="table baseTHead">
<thead>
<tr>
<th data-field="Id">用户帐号</th>
<th data-field="Name">姓名</th>
<th data-field="Policeinfo_Id">年龄</th>
<th data-formatter="formatterOperation" data-align="center" data-width="120px">操作</th>
</tr>
</thead>
</table>
Bootstrap分页查询的更多相关文章
- bootstrap分页查询传递中文参数到后台(get方式提交)
<!--分页 --> <div style="width: 380px; margin: 0 auto; margin-top: 50px;"> <u ...
- bootstrap分页
使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...
- asp.net mvc多条件+分页查询解决方案
开发环境vs2010 css:bootstrap js:jquery bootstrap paginator 原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了 ...
- ASP.NET MVC5 实现分页查询
对于大量数据的查询和展示使用分页是一种不错的选择,这篇文章简要介绍下自己实现分页查询的思路. 分页需要三个变量:数据总量.每页显示的数据条数.当前页码. //数据总量 int dataCount; / ...
- Ajax写分页查询(实现不刷新页面)
获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...
- 用ajax写分页查询-----2017-05-17
要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...
- 分页查询时,使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑
今天做分页查询时需要在跳转页面时保存上次查询的条件,如下: 实现的大致思路就是用cookie本地保存. 其中需要用到jQuery.Cookie插件. 使用方法很简单: 存数据:$.cookie(“ke ...
- javaweb分页查询实现
Javaweb分页技术实现 分页技术就是通过SQL语句(如下)来获取数据,具体实现看下面代码 //分页查询语句 select * from 表名 where limit page , count; 和 ...
- bootstraptable 分页查询
1.前端配置 2.后台输出格式化数据 1.前端配置 @{ Layout = null; } <!DOCTYPE html> <html> <head> <me ...
随机推荐
- linux 安装程序的方式
linux 安装程序的方式 通用二进制格式(绿色软件,打开即用) 软件包管理器(rpm) 软件包管理器的前端工具(yum) 源代码编译
- 小程序-引用的两种方式:import和include
import import可以在该文件中使用目标文件定义的template,如: 在mine.wxml中定义了一个叫item的template: <template name="ite ...
- 更新GitHub项目出现There is no tracking information for the current branch. Please specify which branch you want to merge with. 怎么解决
git pull命令用于从另一个存储库或本地分支获取并集成(整合).git pull命令的作用是:取回远程主机某个分支的更新,再与本地的指定分支合并,它的完整格式稍稍有点复杂. 如果当前分支只有一个追 ...
- ASP.NET Core 模型验证的一个小小坑
今天在我们的一个项目中遇到一个 asp.net core 模型验证(model validation)的小问题.当模型属性的类型是 bool ,而提交上来的该属性值是 null ,asp.net co ...
- angularjs事件通信$on,$emit,$broadcast详解
公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...
- 多网卡做team
简明的说,就是把多个物理网卡绑定成一个逻辑上的网卡,以增加带宽,或者实现主备功能,增加硬件冗余,以实现更高的系统稳定性,目前主要有bond和team两种做法,而bond主要是针对双网卡的情况来说,而t ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- Leetcode练习题 Palindrome Number
9. Palindrome Number Question: Determine whether an integer is a palindrome. An integer is a palindr ...
- 数据库——SQL-SERVER练习(4) 建表及数据完整性
1. 输入下图的语句, 建立学生表STU. CREATE TABLE STU ( SNO NUMERIC() PRIMARY KEY, SNANE CHAR() NOT NULL, SSEX CHAR ...
- 数据库——SQL-SERVER CREATE-TABLES
给出数据库实验所需要的“CREATE-TABLES.SQL”文件 use master go if exists (select * from dbo.sysdatabases where name ...