Bootstrap中datatable结合ajax使用，参数介绍
var table =
&$(document).ready(function() {
& table =&
$('#whhtable').DataTable(
&"bScrollCollapse":&false,&&//当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
&"bPaginate":&true,&&//是否显示分页
&"bLengthChange":&true,&&//每页显示的记录数
&"bFilter":&true,&//搜索栏
&"bSort":&true,&//是否支持排序功能
&"bInfo":&true,&//显示表格信息
&"bAutoWidth":&false,&&//自适应宽度
&"aaSorting":
[[1,&"asc"]],&&//给列表排序
，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
&"aoColumns": [
&&&&&&&"bSortable":&false,&//不排序
&&&&&&&"bSearchable":&false,&//不参与搜索
&&&&&&&&&&&"bSortable":&false,
&&&&&&&&&&&"bSearchable":&true,
&&&&&&&"bSortable":&false,
&&&&&&&"bSearchable":&false,
&&&&&&&"bSortable":&false,
&&&&&&&"bSearchable":&false,
&&&"bSortable":&false,
&&&"bSearchable":&false,
&&&],&//列设置，表有几列，数组就有几项
&&&"bStateSave":&true,&//保存状态到cookie
*************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
&&&"sPaginationType":&"full_numbers",&//分页，一共两种样式，full_numbers和two_button(默认)
&&&"oLanguage":
&&&&&&&"sLengthMenu":&"每页显示
_MENU_ 条记录",
&&&&&&&"sZeroRecords":&"对不起，查询不到任何相关数据",
&&&&&&&"sInfo":&"当前显示
_START_ 到 _END_ 条，共 _TOTAL_ 条记录",
&&&&&&&"sInfoEmtpy":&"找不到相关数据",
&&&&&&&"sInfoFiltered":&"数据表中共为
_MAX_ 条记录)",
&&&&&&&"sProcessing":&"正在加载中...",
&&&&&&&"sSearch":&"搜索",
&&&&&&&"sUrl":&"",&//多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
&&&&&&&"oPaginate":
&&&&&&&&&&&"sFirst":&&&&"第一页",
&&&&&&&&&&&"sPrevious":&"
&&&&&&&&&&&"sNext":&&&&&"
&&&&&&&&&&&"sLast":&&&&&"
最后一页 "
"bJQueryUI":&false,&//可以添加
jqury的ui theme& 需要添加css
"aLengthMenu": [[10, 25, 50, -1],
["每页10条",&"每页25条","每页50条",&"显示所有数据"]],&&//设置每页显示记录的下拉菜单
"columnDefs": [
&&&&&&&&&&&&&&&&&&&
{ "targets":0,"data": "id" },
&&&&&&&&&&&&&&&
{ "targets":1,"data": "type" },
&&&&&&&&&&&&&&&
{ "targets":2,"data": "note" },
&&&&&&&&&&&&&&&
{ "targets":3,"data": "status" },
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&
"targets":4,
&&&&&&&&&&&&&&&&&&&
"data": null,
&&&&&&&&&&&&&&&&&&&
"defaultContent": "修改"
&&&&&&&&&&&&&&&
&&&&&&&&&&&&
function query() {
&&& type :
&&& async :
"./clist.json",
&&& data :
JSON.stringify({
&&& "id" :
&&& "lc_type" :
$("[name='name']").val(),
&&& "status" :
&&& dataType :
"json",// 此处要设置成json
&&& contentType
: "application/charset=utf-8",
&&& success :
function(obj)
table.clear();
&&& for ( var
cot = 0; cot & obj.mapList. cot++) {
var row_data = {
"id": obj.mapList[cot]["id"],
"type": obj.mapList[cot]["type"],
"note": obj.mapList[cot]["note"],
"status":obj.mapList[cot]["status"],
table.row.add(
&&&&&&&&&&&&&&&
).draw().node();
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。先看应用效果：
表格用来显示数据库中的数据，数据通过AJAX从服务器加载，同时分页功能有服务器实现，避免客户端分页，在加载大量数据时造成的用户体验不好。还可以设置查询数据的起止时间，查询一定时间范围的数据。在线编辑功能通过实现，使用实现。
Bootstrap Table有两种使用方式：
对普通的 table 设置&data 属性；
通过JavaScript 来启用 Bootstrap Table 插件。
第一种方式很方便，但是我更倾向于第二种方法，可以做到JS和HTML的分离，并且JS代码可以复用。
比较详细，但是有一些具体内容还得看等。
先贴出前台和后台的实现代码，再具体介绍。
前台需要的资源文件，主要有Bootstrap3相关样式、js以及bootstrap Table相关css、js以及X-editable基于Bootstrap3的样式、js：
&link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"&
&link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css"&
&link rel="stylesheet" href="///vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"&
&script src="../assets/jquery.min.js"&&/script&
&script src="../assets/bootstrap/js/bootstrap.min.js"&&/script&
&script src="../assets/bootstrap-table/src/bootstrap-table.js"&&/script&
&script src="../assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"&&/script&
&script src="///vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"&&/script&
HTML代码只需要&&table id="querylist" class="table table-striped"&&/table&&
JS代码，时间查询相关代码，查询时间设置正确后，通过bootstrap Table方法refresh重新加载数据：
$('#submitgetdata').click(function () {
$('#msg').html('');
var begintime_ = $('#begintime').val();
var endtime_ = $('#endtime').val();
var err = '';
if (begintime_ == '' || endtime_ == ''){
err = '查询时间不能为空';
}else if(Date.parse(endtime_)-Date.parse(begintime_) & 0){
err = '查询时间设置错误';
if (err) {
$('#msg').html(err + '!');
$('#msg').fadeIn(1000);
$('#msg').html("正在提交!");
$('#querylist').bootstrapTable('refresh');
$('#msg').fadeOut(3000);
Table相关js：
$('#querylist').bootstrapTable({
columns: [{
field: 'MeterMeasureHistoryID',
title: 'ID',
sortable: true
field: 'Value',
title: '值',
editable: {
type: 'text',
validate: function(value) {
if($.trim(value) == '') {
return '测量值不能为空';
field: 'Timestamp',
title: '时间',
editable: {
type: 'text',
validate: function(value) {
if($.trim(value) == '') {
return '时间不能为空';
}else if(!Date.parse(value)){
return '时间设置错误';
field: 'operation',
title: '操作',
formatter:function(value,row,index){
var s = '&a class = "save" href="javascript:void(0)"&保存&/a&';
var d = '&a class = "remove" href="javascript:void(0)"&删除&/a&';
return s+' '+d;
events: 'operateEvents'
sortName: 'MeterMeasureHistoryID',
sortOrder: 'desc',
pagination: true,
sidePagination: 'server',
pageNumber: 1,
pageSize: 5,
pageList: [5, 10, 20],
queryParams: function (params) {
meterID: $('#meterid').val(),
pageSize: params.limit,
offset: params.offset,
sortOrder: params.order,
begintime: $('#begintime').val(),
endtime: $('#endtime').val()
url: '/Analyze/GetJsonHistoryDatas'
window.operateEvents = {
'click .save': function (e, value, row, index) {
type: "post",
data: row,
url: '/Analyze/EditMeterMeasureHistoryData',
success: function (data) {
alert('修改成功');
'click .remove': function (e, value, row, index) {
type: "post",
data: row,
url: '/Analyze/DeleteMeterMeasureHistoryData',
success: function (data) {
alert('删除成功');
$('#querylist').bootstrapTable('remove', {
field: 'MeterMeasureHistoryID',
values: [row.MeterMeasureHistoryID]
columns参数设置表格的所有列以及每列的参数，field对应json返回数据的键值以及在Bootstrap Table中的列参数；title对应显示的列名称；sortable设置按着当前列排序；formatter设置列中每个单元格格式；editable设置当前列单元格的编辑方式，还可以设置validate验证方式。
因此实际表格设置为四列，依据第1列排序，2、3列是可以编辑的，type设置为text，可以根据需要使用其他的，第2列验证数据不能为空，第3列验证输入值是时间；1、2、3列的内容来自服务器返回的json数据；第4列是对当前行的数据操作，并且加入监听事件operateEvents，绑定到window上。
sortName设置为第1列field值；
sortOrder设置为逆序；
pagination为true表示分页；
sidePagination为server表示服务器分页；
pageNumber表示默认起始页；
pageSize表示每页显示数据个数；
pageList表示可选的每页显示数据个数；
queryParams表示每次发送给服务器的参数，可以添加自己需要的参数；
url是数据的请求地址。
查看bootstrap-table.js，可以看到默认params参数：
BootstrapTable.prototype.initServer = function (silent, query) {
var that = this,
data = {},
params = {
pageSize: this.options.pageSize === this.options.formatAllRows() ? this.options.totalRows : this.options.pageSize,
pageNumber: this.options.pageNumber,
searchText: this.searchText,
sortName: this.options.sortName,
sortOrder: this.options.sortOrder
if (!this.options.url) {
if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
if (this.options.pagination) {
params.limit = this.options.pageSize === this.options.formatAllRows() ?
this.options.totalRows : this.options.pageS
params.offset = this.options.pageSize === this.options.formatAllRows() ?
0 : this.options.pageSize * (this.options.pageNumber - 1);
服务器后台实现三个功能，一个是根据数据加载，以及数据修改和删除。
public ActionResult GetJsonHistoryDatas()
var displayStart = int.Parse(Request["offset"]);
var displayLength = int.Parse(Request["pageSize"]);
var meterID = int.Parse(Request["MeterID"]);
var order = Request["sortOrder"];
var historyDatas = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).
OrderByDescending(p =& p.Timestamp).
Skip(displayStart).
Take(displayLength).ToList();//显示最近的 displayLength 条数据
if ("asc" == order)
historyDatas = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).
OrderBy(p =& p.Timestamp).
Skip(displayStart).
Take(displayLength).ToList();//显示最早的 displayLength 条数据
int historyDataTotal = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).Count();//数据总条数
//时间过滤
if (!String.IsNullOrEmpty(Request["begintime"]))
DateTime begintime = DateTime.Parse(Request["begintime"]);
DateTime endtime = DateTime.Parse(Request["endtime"]);
historyDatas = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).
Where(p =& p.Timestamp & begintime && p.Timestamp & endtime).
OrderByDescending(p =& p.Timestamp).
Skip(displayStart).
Take(displayLength).ToList();//显示最近的 displayLength 条数据
if ("asc" == order)
historyDatas = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).
Where(p =& p.Timestamp & begintime && p.Timestamp & endtime).
OrderBy(p =& p.Timestamp).
Skip(displayStart).
Take(displayLength).ToList();//显示最早的 displayLength 条数据
historyDataTotal = db.MeterMeasureHistories.
Where(p =& p.MeterMeasure.MeterID == meterID).
Where(p =& p.Timestamp & begintime && p.Timestamp & endtime).Count();//数据总条数
List&MeterMeasureHistoryDataViewModels& ListMeterMeasureHistories = new List&MeterMeasureHistoryDataViewModels&();
foreach (var item in historyDatas)
ListMeterMeasureHistories.Add(new MeterMeasureHistoryDataViewModels
MeterMeasureHistoryID = item.MeterMeasureHistoryID,
Value = item.Value,
Timestamp = item.Timestamp.ToString()
string jsonDataTable = JsonConvert.SerializeObject(
total = historyDataTotal,
rows = ListMeterMeasureHistories
return Content(jsonDataTable);
其中实现了分页以及数据查询，返回json数据，返回的json数据包括total、rows两个对象，total表示数据总数，rows表示需要显示的数据。MeterMeasureHistoryDateView如下，对应Table中的field值：
public class MeterMeasureHistoryDataViewModels
public int MeterMeasureHistoryID { get; set; }
public double Value { get; set; }
public string Timestamp { get; set; }
数据修改函数：
[HttpPost]
public JsonResult EditMeterMeasureHistoryData()
var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]);
var metermeasurehistoryvalue = double.Parse(Request["Value"]);
var metermeasurehistorytime = DateTime.Parse(Request["Timestamp"]);
var metermeasurehistoryInDb = db.MeterMeasureHistories.Find(metermeasurehistoryid);
metermeasurehistoryInDb.Value = mete
metermeasurehistoryInDb.Timestamp = met
db.SaveChanges();
var changedData = new MeterMeasureHistoryDataViewModels
MeterMeasureHistoryID = metermeasurehistoryInDb.MeterMeasureHistoryID,
Value = metermeasurehistoryInDb.Value,
Timestamp = metermeasurehistoryInDb.Timestamp.ToString()
JsonResult js = new JsonResult();
js.Data = Json(changedData);
数据删除函数：
[HttpPost]
public JsonResult DeleteMeterMeasureHistoryData()
var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]);
db.MeterMeasureHistories.Remove(db.MeterMeasureHistories.Find(metermeasurehistoryid));
db.SaveChanges();
var deletedData = new MeterMeasureHistoryDataViewModels
MeterMeasureHistoryID = metermeasurehistoryid,
Value = 0,
Timestamp = null
JsonResult js = new JsonResult();
js.Data = deletedD
服务器删除后，前台通过bootstrap Table方法remove删除指定数据行。
目前就使用了这些，总结下学习过程，就是查官方文档、示例，看源码，并学会使用Chrome开发者工具，查看Sources和Network。
关键字：Bootstrap,Bootstrap Table分页,X-editable
阅读(...) 评论()datatables 配套bootstrap样式使用小结（2） ajax篇-爱编程
datatables 配套bootstrap样式使用小结（2） ajax篇
距离上一篇有点时间了，周末做了伴郎参加了一个土豪同学的婚礼。
上一篇是介绍一下基本的用法，基本的原理是取出所有的数据，然后调用$.datatables(option)方法格式化，这种方法显然不太科学，所以ajax方式是必须的。
首先上个效果图。
js和css引用方面依旧没有变化，详见上篇。
ViewBag.Title = "DataTableServer";
//两种身份
List&SelectListItem& discriminatorTypes = new List&SelectListItem&()
new SelectListItem(){Text="身份类型",Value = ""},
new SelectListItem(){Text = "学生",Value ="Student"},
new SelectListItem(){Text="导师",Value="Instructor"}
&div class="hidden" id="hidden_filter"&
@* 把需要搜索的条件放到hidden里面，在table格式化完成的时候直接调用$.html()赋值，免去了在js拼接标签的麻烦 *@
&div class="row" style="margin-right:0;"&
@Html.DropDownList("disType", discriminatorTypes, new { @class = "form-control input-small", style = "width:120px" })
@Html.TextBox("name", "", new { @class = "form-control input-small", style = "width:150px", placeholder = "请输入姓名" })
&button id="go_search" class="btn btn-default"&搜索&/button&
&div class="panel panel-default"&
&div class="panel-heading"&
&div class="panel-title"&
Ajax 异步获取数据
&div class="panel-body"&
&table id="table_server" class="table table-bordered table-striped table-hover"&
&th&ID&/th&
&th&姓名&/th&
&th&入职时间&/th&
&th&身份&/th&
&th&操作&/th&
页面定义上table里面只需要定义thead即可。
&script type="text/javascript"&
$(function () {
var tablePrefix = "#table_server_";
$("#table_server").dataTable({
serverSide: true,//分页，取数据等等的都放到服务端去
processing: true,//载入数据的时候是否显示&载入中&
pageLength: 10,//首次加载的数据条数
ordering: false,//排序操作在服务端进行，所以可以关了。
ajax: {//类似jquery的ajax参数，基本都可以用。
type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
url: "@Url.Action("GetPeoples")",
dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
var param = {};//因为服务端排序，可以新建一个参数对象
param.start = d.//开始的序号
param.length = d.//要取的数据的
var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组
formData.forEach(function (e) {
param[e.name] = e.
return//自定义需要传递的参数。
columns: [//对应上面thead里面的序列
{ data: "id", },//字段名字和返回的json序列的key对应
{ data: "name", },
//Student 没有hireDate
data: function (e) {
if (e.hireDate) {//默认是/Date()/格式，需要显示成年月日方式
return new Date(Number(e.hireDate.replace(/\D/g, ''))).toLocaleDateString();
return "空";
{ data: "discriminator", },
data: function (e) {//这里给最后一列返回一个操作列表
//e是得到的json数组中的一个item ，可以用于控制标签的属性。
return '&a class="btn btn-default btn-xs show-detail-json"&&i class="icon-edit"&&/i&显示详细&/a&';
initComplete: function (setting, json) {
//初始化完成之后替换原先的搜索框。
//本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。
$(tablePrefix + "filter").html("&form id='filter_form'&" + $("#hidden_filter").html() + "&/form&");
language: {
lengthMenu: '&select class="form-control input-xsmall"&' + '&option value="5"&5&/option&' + '&option value="10"&10&/option&' + '&option value="20"&20&/option&' + '&option value="30"&30&/option&' + '&option value="40"&40&/option&' + '&option value="50"&50&/option&' + '&/select&条记录',//左上角的分页大小显示。
processing: "载入中",//处理页面数据的时候的显示
paginate: {//分页的样式文本内容。
previous: "上一页",
next: "下一页",
first: "第一页",
last: "最后一页"
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
//$("#table_server_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。
$(document).on("submit", "#filter_form", function () {
return false;
$(document).on("click", "#go_search", function () {
$("#table_server").DataTable().draw();//点搜索重新绘制table。
$(document).on("click", ".show-detail-json", function () {//取出当前行的数据
alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
上面主要包含两个点，一个是自定义右上角的filter对象，要在table初始化完成的回调函数里面加载方法；第二个是调用DataTable API对象的draw方法，实现重新加载。
最后想说的是标签的绑定事件要放到document或者其他父标签上，因为元素是在datatable方法加载完成之后才显示出来的。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。完美实现bootstrap分页查询
作者：十期-崔晓光
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了一个完美的bootstrap分页查询，如何利用bootstrap实现分页查询，本文将为大家进行揭晓
最近，开始我们的Java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。其实并不难，只要我们明白分页的实质就行。说了这么多，就让我们看看分页查询的表格是怎么做出来的吧。
先上效果图：
1、引入的css样式
我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。
&link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap.min.css"&
&link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap-responsiv.css"&
&link rel="stylesheet" type="text/css" href="htuploads/rs/238/n8vhm36h/dataTables.bootstra.css"&
2、需要的HTML文本
这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。
&meta charset="UTF-8"&
&title&学生违纪信息&/title&
&%-- &%@ include file="/common.jsp"%& --%&
&!-- 封装的一些bootstrap的样式 --&
&%@ include file="/bootstrap.jsp"%&
&!-- 搜索区域 --&
&div class="row" style="padding-bottom: 20margin-top:20"&
&!-- 搜索框的长度为该行的3/4 --&
&div class="col-md-9"&
&div class="input-group"&
&input id="searchString" type="text" style="height:28" class="form-control" placeholder="请输入实体名"&
&span class="input-group-btn"&
&button type="button" class="btn btn-info" onclick="search()" onkeypress="Enter()"&
&span class="glyphicon glyphicon-search" aria-hidden="true"/&
&!-- 表格显示 --&
&div class="row"&
&div class="col-md-12" style="margin-top:20"&
&div class="panel panel-info"&
&div class="panel-heading"&学生违纪信息&/div&
&table id="table" class="table table-striped table-bordered table-hover datatable"&
&thead id="tem"&
&th id="studentId"&学号&/th&
&th id="studentName"&姓名&/th&
&th id="courseId"&考试科目&/th&
&th id="examRoomId"&考场号&/th&
&th id="className"&班级&/th&
&th id="teacherId"&监考人员&/th&
&!-- 页面底部显示 --&
&!-- 每页显示几条记录 --&
&div id="bottomTool" class="row-fluid" &
&div class="span6" style="width:25%;;margin-right: 10"&
&div class="dataTables_length" id="DataTables_Table_0_length"&
&select id="pageSize" onchange="research()"
aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length"&
&option selected="selected" value="10"&10&/option&
&option value="25"&25&/option&
&option value="50"&50&/option&
&option value="100"&100&/option&
&!-- 显示第 1 至 10 项记录，共 57 项 --&
&div class="span6" style="width:25%;" &
&div id="DataTables_Table_0_info" class="dataTables_info"&显示第 1 至 10 项记录，共 57 项&/div&
&!-- 第2页 --&
&div class="span6" style="width:30%;"&
&div class="dataTables_paginate paging_bootstrap pagination"&
&ul id="previousNext"&
&li onclick="previous()" class="prev disabled"&&a id="previousPage" href="#"&← 上一页&/a&&/li&
&div id="page" style="float:"&
&select id="pageNum" onchange="search()"
style="width:50PX;margin-right:1" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length"&
&option selected="selected" value="1"&1&/option&
&li class="next" onclick="next()"&&a id="nextPage" href="#"&下一页 → &/a&&/li&
3、相应的js代码
&&&&& 这里包含了模糊查询事件，回车事件，上一步，下一步，选择页，选择每页显示条数等常用功能，后期再补充排序和选择列的显示和隐藏等。
&script type="text/javascript"&
//初始化，加载完成后执行
window.onload=function(){
//搜索按钮绑定回车事件
document.onkeydown = function(event){
if (event.keyCode == 13) {
event.cancelBubble =
event.returnValue =
function next(){
//得到当前选中项的页号
var id=$("#pageNum option:selected").val();
//计算下一页的页号
var nextPage=parseInt(id)+1;
//得到select的option集合
var list=document.getElementById("pageNum").
//得到select中，下一页的option
var nextOption=list[nextPage-1];
//修改select的选中项
nextOption.selected=
//调用查询方法
function previous(){
//得到当前选中项的页号
var id=$("#pageNum option:selected").val();
//计算上一页的页号
var previousPage=parseInt(id)-1;
//得到select的option集合
var list=document.getElementById("pageNum").
//得到select中，上一页的option
var previousOption=list[previousPage-1];
//修改select的选中项
previousOption.selected=
//调用查询方法
//修改每页显示条数时，要从第一页开始查起
function research() {
//得到select的option集合
var list=document.getElementById("pageNum").
//得到select中，第一页的option
var nextOption=list[0];
//修改select的选中项
nextOption.selected=
//调用查询方法
//搜索，模糊查询学生违纪信息
function search(){
//得到查询条件
var searchString=$("#searchString").val();
//得到每页显示条数
var pageSize=$("#pageSize").val();
//得到显示第几页
var pageNum=$("#pageNum").val();
type: "POST",
async: false,
url: "queryStudentDisciplineByPage",
data:{"searchString":searchString,
"pageSize":pageSize,
"pageNum":pageNum,
dataType:"text",
success: function (data) {
//将json字符串转为json对象
var pageEntity=JSON.parse(data);
//得到结果集
var obj=pageEntity["rows"];
//将除模板行的thead删除，即删除之前的数据重新加载
$("thead").eq(0).nextAll().remove();
//将获取到的数据动态的加载到table中
for (var i = 0; i & obj. i++) {
//获取模板行，复制一行
var row = $("#tem").clone();
//给每一行赋值
row.find("#studentId").text(obj[i].studentId); //学号
row.find("#studentName").text(obj[i].studentName); //学生姓名
row.find("#courseId").text(obj[i].courseId);
//课程名称
row.find("#examRoomId").text(obj[i].examRoomId);
row.find("#className").text(obj[i].className);
//所属班级
row.find("#teacherId").text(obj[i].teacherId);
//监考教师Id
//将新行添加到表格中
row.appendTo("#table");
//当前记录总数
var pageNumCount=pageEntity["total"];
//当前记录开始数
var pageNumBegin=(pageNum-1)*pageSize+1;
//当前记录结束数
var pageNumEnd=pageNum*pageSize
//如果结束数大于记录总数，则等于记录总数
if(pageNumEnd&pageNumCount){
pageNumEnd=pageNumC
//得到总页数
if(pageNumCount/pageSize==0){
pageCount=pageNumCount/pageS
pageCount=Math.ceil(pageNumCount/pageSize);
//输出"显示第 1 至 10 项记录，共 57 项"
document.getElementById("DataTables_Table_0_info").innerHTML=
"显示第"+pageNumBegin.toString()
+" 至 "+pageNumEnd.toString()
+" 项记录，共 "+pageNumCount.toString()+" 项";
//显示所有的页码数
var pageSelect =document.getElementById("page");
var pageOption="";
//删除select下所有的option，清除所有页码
document.getElementById("pageNum").options.length=0;
for(var i=0;i&pageCi++){
flag=(i+1).toString();
//如果等于当前页码
if(flag==pageNum){
//实例化一个option,则当前页码为选中状态
option=new Option(flag, flag, false, true);
option=new Option(flag, flag, false, false);
//将option加入select中
document.getElementById("pageNum").options.add(option);
//如果总记录数小于5条，则不显示分页
if((pageNumCount-5)&0){
document.getElementById("bottomTool").style.display="none";
document.getElementById("bottomTool").style.display="";
/**给上一步下一步加颜色**/
//判断是否只有一页
if(pageCount==1){
//如果只有一页，上一步，下一步都为灰色
$("#previousPage").css("color","#AAA");//给上一步加灰色
$("#nextPage").css("color","#AAA");//给下一步加灰色
}else if(pageNum-1&1){
//如果是首页,则给上一步加灰色，下一步变蓝
$("#previousPage").css("color","#AAA");//给上一步加灰色
$("#nextPage").css("color","#00F");//给下一步加蓝色
}else if(pageNum==pageCount){
//如果是尾页,则给上一步加蓝色，下一步灰色
$("#previousPage").css("color","#00F");//给上一步标签加蓝色
$("#nextPage").css("color","#AAA");//给下一步标签加灰色
//上一步为蓝色，下一步为绿色
$("#previousPage").css("color","#00F");//给上一步加蓝色
$("#nextPage").css("color","#00F");//给下一步加蓝色
&&&&& 经过这些天的努力，实现了最基本的分页查询功能，还包括上一页、下一页以及选择跳页的效果，而且可以进行模糊查询，而且如果记录小于5条就不会产生分页等。后期再加上排序，选择列的显示和影藏就更好了。我们需要做的还很多，只要我们努力，就一定能够做到。
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}