列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
来源：互联网 发布：乔任梁网络暴力图片 编辑：程序博客网 时间：2024/05/18 01:20
分页实现的js文件page.jsp
var page=1,count=20,totalpage=10;
$(function() {
//生成数据
$("#btn").click(function() {
alert($("#tvc").val())
$.get("createtv",{ct:$("#tvc").val()}, function(res){
if (res == 1) {
alert("创建成功！");
location.href="Tvpage.html";
}else{
alert("创建失败！")
}
});
});
//获取数据，并分页
getData();//初始化后就加载数据
});
//通过Ajax获取json数据显示
function getData() {
$.ajax({
url:"TvPagesServlet2",
type:"get",
data:"page="+page+"&count="+count,
success:function(result){
//alert(result)
$("#tvcon").html("");
var tv = $.parseJSON(result);
for (var i = 0; i < tv.length; i++) {
$("#tvcon").append("<tr><td>"+tv[i].id+"</td>"+"<td>"+tv[i].name+"</td>"+"<td>"+new Date(tv[i].time)+"</td><td><a href='DeleteTvServlet?id="+tv[i].id+"'>删除</a><a href='updateTV.jsp?id="+tv[i].id+"&name="+tv[i].name+"&time="+tv[i].time+"'>修改</a></td></tr>");
}
//添加分页控件
createPage("cpage",totalpage)
}});
}
//上一页
function prepage() {
if (page>1) {
page--;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}
//下一页
function nextpage() {
if (page < totalpage) {
page++;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}
//跳转至某一页
function tzPage() {
//获取输入框的值
if($("#tz").val().length>0){
page=parseInt($("#tz").val());
if (page>totalpage) {
page=totalpage;
}
$("#tvp").val(page);//记录要传入后台的值
}
getData();//获取数据
}
//改变当前页数是触发
function changepage(i) {
page = i;
$("#tvp").val(page);
//修改完page之后重新创建page控件，获取数据
getData()//获取数据
}
//创建分页控件
function createPage(id,talpg) {
page=parseInt($("#tvp").val());
$("#cp").html(page);
//分页前先清空div
$("#"+id).html("");
if (talpg < 6) {//总页数小于6
for (var i = 1; i < 6; i++) {
$("#"+id).append("<button id='btn_'"+i+" onclick='changepage("+i+")'>"+i+"</button>");
}
$("#"+id).append("<label>...</label><label>...</label>");
}else {//总页数大于6
//如果当前页数小于4
if (page < 4) {
for (var i = 1; i < 6; i++) {
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
$("#"+id).append("<label>...</label><label>...</label>");
}else {//当前页数大于4
$("#"+id).append("<button id='btn_1' onclick='changepage("+1+")'>1</button>");
$("#"+id).append("<label>...</label>");
if (page < talpg-3) {
//page=97;
for(var i=page;i<=page+3;i++){
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
if(talpg-page>2){
$("#"+id).append("<label>...</label>");
}
}else {
//page=97;
for(var i=talpg-3;i<=talpg;i++){
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
}
}
}
$("#btn_"+page).addClass("btactive");
//创建跳转页
$("#"+id).append("<button style='margin:10px;' onclick='prepage()'>上一页</button>");
$("#"+id).append("<span>当前<label id='cp'>"+page+"</label>/<label id='tp'>"+talpg+"</label>页</span>");
$("#"+id).append("<button style='margin:5px;' onclick='tzPage()'>跳转至</button><label>第</label><input id='tz'><label>页</label>");
$("#"+id).append("<button style='margin:10px;' onclick='nextpage()'>下一页</button>");
}
$(function() {
//生成数据
$("#btn").click(function() {
alert($("#tvc").val())
$.get("createtv",{ct:$("#tvc").val()}, function(res){
if (res == 1) {
alert("创建成功！");
location.href="Tvpage.html";
}else{
alert("创建失败！")
}
});
});
//获取数据，并分页
getData();//初始化后就加载数据
});
//通过Ajax获取json数据显示
function getData() {
$.ajax({
url:"TvPagesServlet2",
type:"get",
data:"page="+page+"&count="+count,
success:function(result){
//alert(result)
$("#tvcon").html("");
var tv = $.parseJSON(result);
for (var i = 0; i < tv.length; i++) {
$("#tvcon").append("<tr><td>"+tv[i].id+"</td>"+"<td>"+tv[i].name+"</td>"+"<td>"+new Date(tv[i].time)+"</td><td><a href='DeleteTvServlet?id="+tv[i].id+"'>删除</a><a href='updateTV.jsp?id="+tv[i].id+"&name="+tv[i].name+"&time="+tv[i].time+"'>修改</a></td></tr>");
}
//添加分页控件
createPage("cpage",totalpage)
}});
}
//上一页
function prepage() {
if (page>1) {
page--;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}
//下一页
function nextpage() {
if (page < totalpage) {
page++;
}
$("#tvp").val(page);//记录要传入后台的值
getData();
}
//跳转至某一页
function tzPage() {
//获取输入框的值
if($("#tz").val().length>0){
page=parseInt($("#tz").val());
if (page>totalpage) {
page=totalpage;
}
$("#tvp").val(page);//记录要传入后台的值
}
getData();//获取数据
}
//改变当前页数是触发
function changepage(i) {
page = i;
$("#tvp").val(page);
//修改完page之后重新创建page控件，获取数据
getData()//获取数据
}
//创建分页控件
function createPage(id,talpg) {
page=parseInt($("#tvp").val());
$("#cp").html(page);
//分页前先清空div
$("#"+id).html("");
if (talpg < 6) {//总页数小于6
for (var i = 1; i < 6; i++) {
$("#"+id).append("<button id='btn_'"+i+" onclick='changepage("+i+")'>"+i+"</button>");
}
$("#"+id).append("<label>...</label><label>...</label>");
}else {//总页数大于6
//如果当前页数小于4
if (page < 4) {
for (var i = 1; i < 6; i++) {
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
$("#"+id).append("<label>...</label><label>...</label>");
}else {//当前页数大于4
$("#"+id).append("<button id='btn_1' onclick='changepage("+1+")'>1</button>");
$("#"+id).append("<label>...</label>");
if (page < talpg-3) {
//page=97;
for(var i=page;i<=page+3;i++){
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
if(talpg-page>2){
$("#"+id).append("<label>...</label>");
}
}else {
//page=97;
for(var i=talpg-3;i<=talpg;i++){
$("#"+id).append("<button id='btn_"+i+"' onclick='changepage("+i+")'>"+i+"</button>");
}
}
}
}
$("#btn_"+page).addClass("btactive");
//创建跳转页
$("#"+id).append("<button style='margin:10px;' onclick='prepage()'>上一页</button>");
$("#"+id).append("<span>当前<label id='cp'>"+page+"</label>/<label id='tp'>"+talpg+"</label>页</span>");
$("#"+id).append("<button style='margin:5px;' onclick='tzPage()'>跳转至</button><label>第</label><input id='tz'><label>页</label>");
$("#"+id).append("<button style='margin:10px;' onclick='nextpage()'>下一页</button>");
}
分页实现的HTML页面设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页显示</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<style type="text/css">
div {
border: 1px solid red;
}
label {
margin: 3px;
}
input{
width: 90px;
margin: 5px;
}
span {
margin: 3px;
margin-right: 20px;
}
a{
margin: 5px;
}
.btactive{
border: 1px solid blue;
margin: 1px;
color: white;
}
td {
text-align: center;
}
</style>
</head>
<body onload="getDatad()">
<div>
<label>输入要生成的总行数：</label><input type="text" id="tvc" placeholder="输入节目总数">
<input type="button" id="btn" value="生成数据">
</div>
<div>
<table border="1" cellspacing="5px" width="800">
<!-- 表头列表 -->
<thead><tr><th>序号</th><th>节目名称</th><th>播放时间</th><th>操作</th></tr></thead>
<!-- 表体内容，id不能变 -->
<tbody id="tvcon" >
</tbody>
<!--表尾分页控件 -->
<tfoot>
<tr><td colspan="4"><div id="cpage"></div></td></tr>
</tfoot>
</table>
</div>
<!--隐藏input用于记录当前页数 -->
<input type="hidden" id="tvp" value="1">
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>分页显示</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<style type="text/css">
div {
border: 1px solid red;
}
label {
margin: 3px;
}
input{
width: 90px;
margin: 5px;
}
span {
margin: 3px;
margin-right: 20px;
}
a{
margin: 5px;
}
.btactive{
border: 1px solid blue;
margin: 1px;
color: white;
}
td {
text-align: center;
}
</style>
</head>
<body onload="getDatad()">
<div>
<label>输入要生成的总行数：</label><input type="text" id="tvc" placeholder="输入节目总数">
<input type="button" id="btn" value="生成数据">
</div>
<div>
<table border="1" cellspacing="5px" width="800">
<!-- 表头列表 -->
<thead><tr><th>序号</th><th>节目名称</th><th>播放时间</th><th>操作</th></tr></thead>
<!-- 表体内容，id不能变 -->
<tbody id="tvcon" >
</tbody>
<!--表尾分页控件 -->
<tfoot>
<tr><td colspan="4"><div id="cpage"></div></td></tr>
</tfoot>
</table>
</div>
<!--隐藏input用于记录当前页数 -->
<input type="hidden" id="tvp" value="1">
</body>
</html>
要注意这里的id对应的page.js中的$("#值")要一致，以上的Ajax 获取的是后台传过来的json数据，大家复用的时候要注意后台解析和上传数据json类型
阅读全文
0 0
- 列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
- 使用Ajax+JQuery构造分页查询列表
- 对html或jsp文章列表页面进行js分页，结合使用apache的url Rewrite和jquery
- 使用PHP+JQuery+Ajax分页的实现
- 使用PHP+JQuery+Ajax分页的实现
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！
- 使用Ajax和jQuery实现用户友好的web页面
- jquery实现ajax查询后台数据列表，支持分页
- 用ajax+jQuery 实现页面加载更多(另类的分页)
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- JQuery实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- SSM框架 用ajax实现模糊查询分页和列表
- 实现ASPxGridView基于AJAX和自定义数据源的分页查询
- PHP中使用jQuery+Ajax实现分页查询多功能操作
- 使用jQuery+ajax实现级下拉列表的级联显示
- 用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
- 初识css
- CXF框架学习，发布webservice服务
- 深入理解快速排序
- microchip芯片中文数据手册获取路径-microchip工程师社区
- 数据结构相关概念
- 列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
- RecycleView自定义ItemDecoration，实现时间轴效果
- mysql数据库分表及实现
- 2017-09-21 14:45:00.022 ERROR [http-nio-8091-exec-8](ErrorPageFilter.java:209)
- java EE开发之Servlet第七课：JNDI
- MaxCompute 2.0—从ODPS到MaxCompute
- jq中事件重复问题
- 学习进度
- iOS 【自适应长度标题栏-类似于滴滴打车】
