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 ...
随机推荐
- Builder模式的演示
Builder模式的演示 package com.mozq.mb.mb01.pojo; /* 类的某些参数给出了默认值,但是一旦设置了就不可变.使用Builder模式来创建. */ public cl ...
- 匿名内部类和局部内部类只能访问final变量的原因
以下是从各大网站找来的解释,我在这里摘抄一些从其他地方搬过来的大致思想,可能会比较乱, 详细解释 http://blog.csdn.net/salahg/article/details/7529091 ...
- 第二章 简单的HTTP协议
第二章 简单的HTTP协议 针对HTTP协议结构进行讲解 1.通过请求和响应的交换来达成通信目的 应用HTTP协议时,必定是一端担任客户端角色,另一端担任服务器端角色. [请求报文]是由请求方法.UR ...
- OC:浅析Runtime中消息转发机制
一.介绍 OC是一门动态性语言,其实现的本质是利用runtime机制.在runtime中,对象调用方法,其实就是给对象发送一个消息,也即objc_msgSend().在这个消息发送的过程中,系统会进行 ...
- java自定义equals函数和hashCode函数
所有类都继承自Object类,他所有的非final方法:equals,hashCode, toString, clone 和 finalize,它们都有通用约定. 我们在覆盖这些方法的时候需要遵循这些 ...
- github上星星1万多的python教程推荐收藏
简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支持面向对象和函数式编程 能够通过调用 ...
- 推荐 | 中文文本标注工具Chinese-Annotator(转载)
自然语言处理的大部分任务是监督学习问题.序列标注问题如中文分词.命名实体识别,分类问题如关系识别.情感分析.意图分析等,均需要标注数据进行模型训练.深度学习大行其道的今天,基于深度学习的 NLP 模型 ...
- Android studio移动项目到另外一个文件夹,结果不能安装的解决方法
删除.gradle , .idea , build 三个文件夹即可
- java基础(18):集合、Iterator迭代器、增强for循环、泛型
1. 集合 1.1 集合介绍 集合,集合是java中提供的一种容器,可以用来存储多个数据. 在前面的学习中,我们知道数据多了,可以使用数组存放或者使用ArrayList集合进行存放数据.那么,集合和数 ...
- Docker配置yapi接口
一.安装Docker 第一步:yum 包更新到最新 sudo yum update 第二步:安装需要的软件包 yum-util 提供yum-config-manager功能,另外两个是devicema ...