Bootstrap+Ajax+HTML 动态表格分页
1.HTML页面：（bootstrap的模态框）
触发模态框：
<div class="col-lg-6">
<div class="input-group" style="margin-left: 15px;">
<input type="text" class="form-control" placeholder="选择车主" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-backdrop="static" style="background-color: #337ab7; color: white;">
选择
</button> </span>
</div>
</div>
模态框
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="row">
<div class="col-lg-6">
<div class="input-group" style="margin-left: 15px;">
<input id="selCrInfor" type="text" class="form-control" placeholder="姓名/电话/车牌" /> <span class="input-group-btn">
<button class="btn btn-default" type="button" style="background-color: #337ab7; color: white;" onclick="GetCarInfor()">
查询
</button>
</span> </div>
<div style="padding-top: 10px;">
<span> <img src="../images/house_go.png" />
<span id="depot"></span>
<input name="depotId" type="text" id="depotId" hidden="hidden" />
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg- -->
</div> </div> <div class="modal-body" style="overflow: scroll;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-info" style="width: 1400px; ">
<div class="panel-heading">车辆信息</div>
<table id="table" class="table table-hover table-striped ">
<thead id="tem">
<tr >
<th id="cr_Date"><span style="color:#e2a9db">登记日期</span></th>
<th id="cr_Name"><span style="color:#e2a9db">车主姓名</span></th>
<th id="cr_Tel"><span style="color:#e2a9db">联系电话</span></th>
<th id="cr_CarType"><span style="color:#e2a9db">车型</span></th>
<th id="cr_CarNum"><span style="color:#e2a9db">车牌号</span></th>
<th id="cr_LicenseNum"><span style="color:#e2a9db">行驶证号</span></th>
<th id="cr_kmCount"><span style="color:#e2a9db">当前公里数</span></th>
<th id="de_Name"><span style="color:#e2a9db">登记店铺</span></th>
<th id="cr_MemberId"><span style="color:#e2a9db">会员卡号</span></th>
<th id="cr_IsMember"><span style="color:#e2a9db">是否会员</span></th>
<th id="cr_Memo"><span style="color:#e2a9db">备注</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table> </div> </div> </div> <!-- 页面底部显示 --> <!-- 每页显示几条记录 --> <div id="bottomTool" class="row-fluid">
<div class="span6" style="width: 100%; margin-left: -40px;">
<div class="dataTables_paginate paging_bootstrap pagination">
<ul id="previousNext">
<li onclick="previous()" class="prev disabled"><a id="previousPage" href="#">上一页</a></li>
<li id="page" style="float: left;">
<select id="pageNum" onchange="ToPage()" style="width: 50PX; margin-right: 1px;" aria-controls="DataTables_Table_0" size="" name="DataTables_Table_0_length">
<option selected="selected" value=""></option>
</select>
</li>
<li class="next" onclick="next()"><a id="nextPage" href="#">下一页</a></li> <li class="dataTables_length" id="DataTables_Table_0_length" style="margin-left:10px;">每页
<select id="pageSize" onchange="research()"
aria-controls="DataTables_Table_0" size="" name="DataTables_Table_0_length">
<option selected="selected" value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
条 共<span id="totalPage"></span>页
</li>
</ul> </div> </div> </div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" style="float: left;">
<span class="glyphicon glyphicon-plus"></span>增加
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
2.js代码
$(function () {
GetCarList(GetSqlCarOwner());
});
// 列表
function GetCarList(strWhere) {
if ($("#depotId").val() == "") {
$("#depotId").val($("#deId").val());
}
//得到查询条件
var searchString = strWhere;
//得到每页显示条数
var pageSize = $("#pageSize").val().trim();
//得到显示第几页
var pageNum = $("#pageNum").val().trim();
$.ajax({
type: "POST",
async: false,
url: "../Ajax/CarOwnerAjax.ashx",
data: {
"strWhere": searchString,
"rows": pageSize,
"page": pageNum,
"cmd": "carOwnerList",
"de_Id": $("#depotId").val()
},
dataType: "text",
success: function (data) {
//将json字符串转为json对象
var pageEntity = JSON.parse(data);
//得到结果集
var obj = pageEntity["rows"];
//将除模板行的thead删除，即删除之前的数据重新加载
$("thead").eq().nextAll().remove();
//将获取到的数据动态的加载到table中
for (var i = ; i < obj.length; i++) {
//获取模板行，复制一行
var row = $("#tem").clone();
//给每一行赋值
row.find("#cr_Date").text(obj[i].cr_Date);
row.find("#cr_Name").text(obj[i].cr_Name);
row.find("#cr_Tel").text(obj[i].cr_Tel);
row.find("#cr_CarType").text(obj[i].cr_CarType);
row.find("#cr_CarNum").text(obj[i].cr_CarNum);
row.find("#cr_LicenseNum").text(obj[i].cr_LicenseNum);
row.find("#cr_kmCount").text(obj[i].cr_kmCount);
row.find("#de_Name").text(obj[i].de_Name);
if (obj[i].cr_MemberId == ||obj[i].cr_MemberId ==null) {
row.find("#cr_MemberId").text("");
}
if (obj[i].cr_IsMember == ) {
row.find("#cr_MemberId").text(obj[i].cr_MemberId);
}
if (obj[i].cr_IsMember == ) {
row.find("#cr_IsMember").text("否");
//$("#cr_IsMember").css("background-color", "#eee3a7");
}
if (obj[i].cr_IsMember == ) {
row.find("#cr_IsMember").text("是");
//$("#cr_IsMember").css("background-color", "#b1d3f1");
}
row.find("#cr_Memo").text(obj[i].cr_Memo);
//将新行添加到表格中
row.appendTo("#table");
}
//当前记录总数
var pageNumCount = pageEntity["total"];
//当前记录开始数
var pageNumBegin = (pageNum - ) * pageSize + ;
//当前记录结束数
var pageNumEnd = pageNum * pageSize
//如果结束数大于记录总数，则等于记录总数
if (pageNumEnd > pageNumCount) {
pageNumEnd = pageNumCount;
}
//得到总页数
var pageCount;
if (pageNumCount / pageSize == ) {
pageCount = pageNumCount / pageSize;
} else {
pageCount = Math.ceil(pageNumCount / pageSize);
}
//输出共多少页
if (pageCount <= ) {
document.getElementById("totalPage").innerHTML = ;
} else {
document.getElementById("totalPage").innerHTML = pageCount;
}
//显示所有的页码数
var pageSelect = document.getElementById("page");
var pageOption = "";
var flag;
//删除select下所有的option，清除所有页码
document.getElementById("pageNum").options.length = ;
if (pageCount <= ) {
var option = new Option("", "", false, true);
document.getElementById("pageNum").options.add(option);
} else {
for (var i = ; i < pageCount; i++) {
flag = (i + ).toString();
var option;
//如果等于当前页码
if (flag == pageNum) {
//实例化一个option,则当前页码为选中状态
option = new Option(flag, flag, false, true);
} else {
option = new Option(flag, flag, false, false);
}
//将option加入select中
document.getElementById("pageNum").options.add(option);
}
}
/**给上一步下一步加颜色**/
//判断是否只有一页
if (pageCount == ) {
//如果只有一页，上一步，下一步都为灰色
$("#previousPage").css("color", "#AAA");//给上一步加灰色
$("#nextPage").css("color", "#AAA");//给下一步加灰色
} else if (pageNum - < ) {
//如果是首页,则给上一步加灰色，下一步变蓝
$("#previousPage").css("color", "#AAA");//给上一步加灰色
$("#nextPage").css("color", "#66a4db");//给下一步加蓝色
} else if (pageNum == pageCount) {
//如果是尾页,则给上一步加蓝色，下一步灰色
$("#previousPage").css("color", "#66a4db");//给上一步标签加蓝色
$("#nextPage").css("color", "#AAA");//给下一步标签加灰色
} else {
//上一步为蓝色，下一步为绿色
$("#previousPage").css("color", "#66a4db");//给上一步加蓝色
$("#nextPage").css("color", "#66a4db");//给下一步加蓝色
}
}
});
}
//切换到第几页
function ToPage() {
GetCarList(GetSqlCarOwner());
}
//上一页
function previous() {
//得到当前选中项的页号
var id = $("#pageNum option:selected").val();
//计算上一页的页号
var previousPage = parseInt(id) - ;
//得到select的option集合
var list = document.getElementById("pageNum").options;
//得到select中，上一页的option
var previousOption = list[previousPage - ];
//修改select的选中项
previousOption.selected = true;
//调用查询方法
GetCarList(GetSqlCarOwner());
}
//下一页
function next() {
//得到当前选中项的页号
var id = $("#pageNum option:selected").val();
//计算下一页的页号
var nextPage = parseInt(id) + ;
//得到select的option集合
var list = document.getElementById("pageNum").options;
//得到select中，下一页的option
var nextOption = list[nextPage - ];
//修改select的选中项
nextOption.selected = true;
//调用查询方法
GetCarList(GetSqlCarOwner());
}
//修改每页显示条数 ，要从第一页开始查起
function research() {
//得到select的option集合
var list = document.getElementById("pageNum").options;
//得到select中，第一页的option
var nextOption = list[];
//修改select的选中项
nextOption.selected = true;
//调用查询方法
GetCarList(GetSqlCarOwner());
}
Bootstrap+Ajax+HTML 动态表格分页的更多相关文章
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...
- ajax获取动态列表数据后的分页问题
ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...
- 查询表格——建立动态表格，使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来
建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text ...
- SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
随机推荐
- 2019牛客暑期多校训练营（第二场） - H - Second Large Rectangle - dp
https://ac.nowcoder.com/acm/contest/882/H 正确的办法:dp1[i][j]表示以i,j为底的矩形的高.得到dp1之后,dp2[i][j]表示以dp1[i][j] ...
- python学习第二十八天函数局部变量的用法
函数局部变量是在函数里面的变量,只能在函数内部使用,如果函数没有找对应变量,函数将去函数外部找对应变量,局部变量优先级大于外部变量,详细说明一下 1,局部变量已经定义值 name='zhan san' ...
- 将ibatis迁移到mybatis3的过程记录
将ibatis迁移到mybatis3的过程记录 场景:有些以前的老项目是使用ibatis开发的,现在有转换成mybatis3的需求. 环境准备:需要安装Ant,以下是本人的安装版本,具体怎么安装不再赘 ...
- 2019-1-24-WPF-文字描边
title author date CreateTime categories WPF 文字描边 lindexi 2019-01-24 19:47:18 +0800 2019-1-24 19:40:7 ...
- Kintex7 XC7K325T 板卡五兄弟
Kintex 7五兄弟 1. 基KC705E 增强版基于FMC接口的Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 接口卡(136) 本板卡是Xilinx公司芯 ...
- POJ 3237 树链剖分
题目链接:http://poj.org/problem?id=3237 题意:给定一棵n个结点n-1条边的树. 每条边都是一个边权. 现在有4种操作 1:CHANGE I V:把(输入的)第i条边的边 ...
- 利用 Redis 锁解决高并发问题
这里我们主要利用 Redis 的 setnx 的命令来处理高并发. setnx 有两个参数.第一个参数表示键.第二个参数表示值.如果当前键不存在,那么会插入当前键,将第二个参数做为值.返回 1.如果当 ...
- 前端每日实战：63# 视频演示如何用纯 CSS 创作一台烤面包机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEBJRN 可交互视频 此视频是可 ...
- pythonerror ValueError：invalid literal for int() with base 10: '3.14'
解释:对于int()来说,文本输入‘3.14’这个输入是无效的,原因是int类要求输入数字或者整数字符 解决:a= int(float(value)) 注:int本身是一个类,所以返回的是int类,i ...
- 使用burpsuite的几点经验
背景: 最近在做完一个系统的渗透测试,我同事在我昨晚渗透测试之后上去看了一下,发现了了一个我没有发现的漏洞. 请教了他之后,发现这个漏洞他是通过burp的scan发现的,只是对一个有参数的请求包sca ...