1. <#macro ajaxPaginte url >
  2. <script type="text/javascript">
  3. var PageSize = 10;//每页行数
  4. var IsInit = true;//初始化
  5.  
  6. var search= function(pageIndex,initFlag) {
  7. var url = "${url}";
  8. $.ajax({
  9. type: 'GET',
  10. url: url,
  11. data: { pageNumber:pageIndex,pageSize: PageSize,skuId:$("#skuId").val(),skuModel:$("#skuModel").val() },
  12. success: function (data) {
  13. if (initFlag) {
  14. initPagination(data.total);
  15. IsInit = false;
  16. }
  17. <#nested>
  18. },
  19. error: function (msg) {
  20. console.log(msg.responseText);
  21. }
  22. });
  23. }
  24.  
  25. var initPagination = function (Count) {
  26. // 创建分页
  27. $("#Pagination").pagination(Count, {
  28. first_text:'首页',
  29. last_text:'尾页',
  30. num_display_entries:10,
  31. callback: pageselectCallback,
  32. items_per_page: PageSize //每页显示行数
  33. });
  34. }
  35. function pageselectCallback(page_index, jq) {
  36. if (!IsInit)
  37. search(page_index + 1);
  38. return false;
  39. }
  40. $(function () {
  41. search(1, true);//1代表第一页
  42. });
  43. </script>
  44. </#macro>
  1. <div class="panel panel-default">
  2. <div class="panel-body">
  3. <#include "/common/ajaxPaginte.html">
  4. <table class="table table-bordered" id="user-list-table">
  5. <thead>
  6. <tr>
  7. <th class="col-mo-2">名字</th>
  8. <th class="col-mo-2">性别</th>
  9. <th class="col-mo-2">电话</th>
  10.  
  11. <th class="col-mo-1">操作</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. </tbody>
  16. </table>
  17. <div id="Pagination" class="pagination">
  18. </div>
  19. </div>
  20. </div>
  21. <@ajaxPaginte "/system/user/listUserByAjax/" >
  22. var table_body="";
  23. $.each(data.records,function(index,value){
  24. var sex=value.sex==1?"男":"女";
  25. 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>";
  26. });
  27. $("#user-list-table>tbody").empty().append(table_body);
  28. </@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. 【AC自动机】bzoj3172: [Tjoi2013]单词

    fail图上后缀和需要注意一下 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整 ...

  2. 11Vim文本编辑器

    Vim文本编辑器 在Linux系统中一切都是文件,而配置一个服务就是在修改其配置文件的参数. Vim提供了三种模式:命令模式.输入模式.末行模式 1.命令模式 每次运行Vim编辑器时,默认进入命令模式 ...

  3. php通过geohash算法实现查找附近的商铺

    geohash有以下几个特点: 首先,geohash用一个字符串表示经度和纬度两个坐标.利用geohash,只需在一列上应用索引即可. 其次,geohash表示的并不是一个点,而是一个矩形区域.比如编 ...

  4. 小程序电脑调试没有问题,真机预览报错fail hand shake error

    今天在做小程序的过程中使用HTTPS请求数据时,遇到安卓机型无法获取到数据,通过一系列的排查,发现是因为ssl证书的问题,后来通过https://www.myssl.cn/tools/check-se ...

  5. leetcode-26-exercise_linked-list

    141. Linked List Cycle Given a linked list, determine if it has a cycle in it. 解题思路: 需要检查before和afte ...

  6. XenServer 6.5 安装

    为了方便截图我下面的所有操作都是在VMware Workstation 11 上面完成的,但在之后的所有Citrix产品的操作中都将会在物理环境完成,物理机安装XS的步骤和下面是相同的. 1.打开Wo ...

  7. 系统测试过程截获SQL方法

    1      摘要 测试过程中,经常会遇到莫名的各种问题,可能从开发同学的日志无法发现具体出现问题的原因,本着测试同学深入分析.定位问题的目的,经常需要一些额外的手段获得更多的错误异常信息. 我们涉及 ...

  8. asynctask 异步下载

    public class MainActivity extends Activity{ private TextView show; @Override public void onCreate(Bu ...

  9. xml了解

    Xml简介 ➢XML指可扩展标记语言(Extensible Markup Language) ➢XML被设计用于结构化.存储和传输数据 ➢XML是一种标记语言,很类似于HTML ➢XML没有像HTML ...

  10. Node.js中的http.request方法的使用说明

    方法说明: 函数的功能室作为客户端向HTTP服务器发起请求. 语法: http.get(options, callback) 由于该方法属于http模块,使用前需要引入http模块(var http= ...