<#macro ajaxPaginte url >
<script type="text/javascript">
var PageSize = 10;//每页行数
var IsInit = true;//初始化 var search= function(pageIndex,initFlag) {
var url = "${url}";
$.ajax({
type: 'GET',
url: url,
data: { pageNumber:pageIndex,pageSize: PageSize,skuId:$("#skuId").val(),skuModel:$("#skuModel").val() },
success: function (data) {
if (initFlag) {
initPagination(data.total);
IsInit = false;
}
<#nested>
},
error: function (msg) {
console.log(msg.responseText);
}
});
} var initPagination = function (Count) {
// 创建分页
$("#Pagination").pagination(Count, {
first_text:'首页',
last_text:'尾页',
num_display_entries:10,
callback: pageselectCallback,
items_per_page: PageSize //每页显示行数
});
}
function pageselectCallback(page_index, jq) {
if (!IsInit)
search(page_index + 1);
return false;
}
$(function () {
search(1, true);//1代表第一页
});
</script>
</#macro>
<div class="panel panel-default">
<div class="panel-body">
<#include "/common/ajaxPaginte.html">
<table class="table table-bordered" id="user-list-table">
<thead>
<tr>
<th class="col-mo-2">名字</th>
<th class="col-mo-2">性别</th>
<th class="col-mo-2">电话</th> <th class="col-mo-1">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="Pagination" class="pagination">
</div>
</div>
</div>
<@ajaxPaginte "/system/user/listUserByAjax/" >
var table_body="";
$.each(data.records,function(index,value){
var sex=value.sex==1?"男":"女";
table_body+="<tr><td>"+value.realName+"</td><td>"+sex+"</td><td>"+value.tel+"</td><td><a class='btn btn-primary btn-xs' href='javascript:;' onclick='select_row({name:\""+value.realName+"\",id:\""+value.id+"\"})'> <i class='fa fa-pencil-square-o'></i>选取</a></td></tr>";
});
$("#user-list-table>tbody").empty().append(table_body);
</@ajaxPaginte>

  

ajax 分页(jquery分页插件pagination) 小例3的更多相关文章

  1. ajax+php (jquery.form插件)实现异步文件上传

    <!DOCTYPE html> <html lang="CN"> <head> <title>upload model</ti ...

  2. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  3. jquery 分页控件(二)

    上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...

  4. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  5. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  7. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  8. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  9. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  10. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

随机推荐

  1. 【转】Windows 邮件槽(MailSlot)

    Windows 邮件槽(MailSlot) 来自<Windows网络编程第二版 中文版> 优点:通过网络,将一条消息广播给一台或多台计算机.   缺点:只允许从客户机到服务器,建立一种不可 ...

  2. 【最大流】bzoj1711: [Usaco2007 Open]Dining吃饭

    正在网络流入门(原来这种题用网络流做) Description 农夫JOHN为牛们做了很好的食品,但是牛吃饭很挑食. 每一头牛只喜欢吃一些食品和饮料而别的一概不吃.虽然他不一定能把所有牛喂饱,他还是想 ...

  3. Linux-Java安装

    安装 yum -y install java-1.8.0-openjdk* Tomcat安装:到官网http://tomcat.apache.org/,然后找到Tomcat9下载地址 http://m ...

  4. Struts2和SpringMVC简单配置以及区别总结

    Struts2: struts 2 是一个基于MVC(mode-view-con)设计模式的Web应用框架,是由Struts1和WebWork两个经典框架发展而来的. 工作流程: 1客户端浏览器发出H ...

  5. Go IO && bufio

    IO IO包 是对数据流的操作.从哪里来, 怎么处理,再到哪里去. 图片来源 https://medium.com/learning-the-go-programming-language/strea ...

  6. OpenStack, kvm, qemu-kvm以及libvirt之关系

    OpenStack, kvm, qemu-kvm以及libvirt之关系: KVM是最底层的hypervisor,它是用来模拟CPU的运行,它缺少了对network和周边I/O的支持,所以我们是没法直 ...

  7. Leetcode 814. 二叉树剪枝

    题目链接 https://leetcode-cn.com/problems/binary-tree-pruning/description/ 题目描述 给定二叉树根结点 root ,此外树的每个结点的 ...

  8. 通过Proxool配置访问数据库的要点

    proxool 配置的时候有Proxool.properties 或者 Proxool.xml 两种方式初始化. 我的配置环境是 myEclipse10+tomcat6.0 + mysql5.0 . ...

  9. Linux学习-函式库管理

    动态与静态函式库 首先我们要知道的是,函式库的类型有哪些?依据函式库被使用的类型而分为两大类,分别是静态 (Static) 与动态 (Dynamic) 函式库两类. 静态函式库的特色: 扩展名:(扩展 ...

  10. HDU 5047 Sawtooth 高精度

    题意: 给出一个\(n(0 \leq n \leq 10^{12})\),问\(n\)个\(M\)形的折线最多可以把平面分成几部分. 分析: 很容易猜出来这种公式一定的关于\(n\)的一个二次多项式. ...