//使用Ajax异步查询数据

<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>name</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<ul class="pagination"> </ul>
</td>
</tr>
</tfoot>
</table>
</div> <script type="text/javascript">
$(function () {
init();
showMenu();
}); //使用Ajax异步查询数据
function queryPage(pageno) {
var dataObj = {
"pageno": pageno, //pageno 是属性名称,是否增加双引号无所谓
"pagesize": 3
};
if (condition) {
dataObj.queryText = $("#queryText").val(); //增加模糊查询条件
}
var loadingIndex = -1;
$.ajax({
url: "${APP_PATH}/role/pageQuery.do",
type: "post",
data: dataObj,
beforeSend: function () {
loadingIndex = layer.msg('数据查询中', {icon: 6});
return true;
},
success: function (result) {
//显示结果
layer.close(loadingIndex);
if (result.success) {
var pageObj = result.page;
var roleList = pageObj.data;
var content = "";
$.each(roleList, function (i, n) {
content += "<tr>";
content += " <td>" + (i + 1) + "</td>";
content += " <td><input type='checkbox' value='" + n.id + "'></td>";
content += " <td>" + n.name + "</td>";
content += " <td>";
content += " <button type='button' onclick='window.location.href=\"${APP_PATH}/role/assign.htm?roleid=" + n.id + "\"' class='btn btn-success btn-xs'>";
content += " <i class=' glyphicon glyphicon-check'></i>";
content += " </button>";
content += " <button type='button' onclick='window.location.href=\"${APP_PATH}/role/edit.htm?pageno=" + pageObj.pageno + "&id=" + n.id + "\"' class='btn btn-primary btn-xs'>";
content += " <i class=' glyphicon glyphicon-pencil'></i>";
content += " </button>";
content += " <button type='button' class='btn btn-danger btn-xs' onclick='deleteRole(" + n.id + ",\"" + n.name + "\")'>";
content += " <i class=' glyphicon glyphicon-remove'></i>";
content += " </button>";
content += " </td>";
content += "</tr>";
//$("tbody").append(content);
$("tbody").html(content);
}); //拼接导航条
var pageContent = ""; if (pageObj.pageno != 1) {
pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno - 1) + ')">上一页</a></li>';
} for (var i = 1; i <= pageObj.totalno; i++) {
if (i == pageObj.pageno) {
pageContent += '<li class="active"><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>'; } else {
pageContent += '<li><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>'; }
} if (pageObj.pageno != pageObj.totalno) {
pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno + 1) + ')">下一页</a></li>';
} $(".pagination").html(pageContent); } else {
layer.msg("角色分页查询数据失败", {time: 1000, icon: 5, shift: 6});
}
},
error: function () {
layer.msg("角色分页查询数据错误", {time: 1000, icon: 5, shift: 6});
}
});
} var condition = false;
//条件查询
function queryRole() {
var queryText = $("#queryText"); if (queryText.val() == "") {
layer.msg("查询条件不能为空", {time: 1000, icon: 5, shift: 6}, function () {
queryText.focus();
});
return;
}
condition = true;
queryPage(1);
} function changePageno(pageno) {
//window.location.href = "<%=request.getContextPath() %>/role/index.htm?pageno="+pageno;
queryPage(pageno);
} function init() {
$(".list-group-item").click(function () {
if ($(this).find("ul")) {
$(this).toggleClass("tree-closed");
if ($(this).hasClass("tree-closed")) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
}); <c:if test="${empty param.pageno}">
queryPage(1);
</c:if>
<c:if test="${not empty param.pageno}">
queryPage(${param.pageno});
</c:if>
}
</script>

jquery 分页 Ajax异步的更多相关文章

  1. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  2. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  3. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  4. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  5. Thinkphp,Jquery,Ajax异步发布

    1.在提交表单的HTML页面的<head>中定义一个变量供Jquery使用 <script type='text/javascript'>var handleUrl='< ...

  6. jquery中ajax异步调用接口

    之前写过一个原始的.无封装的页面,没有引入任何外部js,直接实例化Ajax的XmlRequest对象去异步调用接口,参见Ajax异步调用http接口后刷新页面,可对比一下. 现在我们用jquery包装 ...

  7. jquery管理ajax异步-deferred对象

    今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...

  8. jQuery的AJax异步加载

    主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...

  9. jQuery的AJax异步载入片段

    主要用到load()方法以及getScript()方法,详细以一个样例说明: 在现有html文件里载入一个拟好的片段,以及在片段载入完毕之前阻止用户进一步操作的弹出框. 首先是现有html代码.无不论 ...

随机推荐

  1. Javaweb项目的命名规范

    项目名称:一般是英文 包名:公司域名的倒写,例如com.baidu 数据访问层:dao,persist,mapper 实体:entity,model,bean,javabean,pojo 业务逻辑:s ...

  2. 微信小程序 购物车流程

    购物车流程 一.需求分析 a:全选,单选,根据选中的计算数目和总价 b:单个商品加减 c:删除一个商品 wxml 布局 <view> <view v-if="flag&qu ...

  3. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  4. pycharm的一些快捷键[转]

    编辑类: Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 类名完成Ctrl + Shift + Enter 语句完成Ctrl + P 参数信息(在方法中 ...

  5. Java进阶学习(5)之设计原则(下)

    框架加数据 把数据的硬编码尽可能解成框架加数据的结构 城堡游戏修改后的代码 Room类 package com.castle; import java.util.HashMap; public cla ...

  6. GEE引擎假人系统自定义教程

    现如今传奇游戏玩家数量日渐减少.为了给服务器增加人气,很多GM在服务端中增加了自动登录和自动打怪的假人系统.由于该系统登录的假人可以自动练功,自动攻城和实现简单的对话.完全可以做到以假乱真的地步!所以 ...

  7. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  8. 喵星之旅-狂奔的兔子-rabbitmq的java客户端使用入门

    一.简介 RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件). 消息队列都涉及的生产者消费者模型,不做详解,本文只作为快速使用的参考文档. 消息队列主要有点 ...

  9. 1、json背景

    教程链接 链接:http://pan.baidu.com/s/1mil4M1M 密码:vwsn JSON (JavaScript对象表示法)是一种轻量级的基于文本的开放标准,被设计用于可读的数据交换, ...

  10. Ubuntu16 nginx 配置 Let's Encrypt 免费ssl

    每篇一句 Some of us get dipped in flat, some in satin, some in gloss. But every once in a while you find ...