最近在使用mvcpager时发现ajax分页需要使用Partial来实现，而且使用起来还是觉得不太方便。突然想自己做一个mvc的ajax分页，但是如果table直接用js输出就不好维护了。

angularJS有一个ng-repeat属性，可以重复输出html，觉得这个方式不错，所以就有了下面这个方法。

我的模板主要是使用了2个自定义属性xs-repeat（根据此id绑定），xs-template（进行模板隐藏和与普通绑定区分）。

目前只能绑定json格式，而且此方式不易于seo,但是作为后台可行，目前已经实现与js+ajax结合分页。

下面是我的代码，可以直接保存为html格式，运行即可。

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  6.     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  7.     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  8.     <script src="../Script/jquery-1.9.1.min.js"></script>
  9.     <script type="text/javascript">
  10.         $(document).ready(function () {
  11.             $("[xs-template]").hide();
  12.             $("a").click(function () {
  13.                 $("li").removeClass("active");
  14.                 $(this).parent().addClass("active");
  15.                 Change($(this).text());
  16.             });
  17.             Change(1);
  18.         });
  19.  
  20.         function bindRepeat(repeatid, data) {
  21.             $("[xs-repeat='" + repeatid + "']").not("[xs-template]").remove();
  22.             var template = $("[xs-template][xs-repeat='" + repeatid + "']").prop("outerHTML");
  23.             var arrMatch = template.match(/{{[^{]*}}/g);//{{ID}}匹配
  24.             var html = "";
  25.             for (var i = 0; i < data.length; i++) {
  26.                 var thisHtml = template.replace("xs-template=\"\"", "");
  27.                 for (var j = 0; j < arrMatch.length; j++) {
  28.                     var columnName = $.trim(arrMatch[j].replace(/{|}/g, ""));
  29.                     var regColumn = new RegExp(arrMatch[j], "g");
  30.                     thisHtml = thisHtml.replace(regColumn, data[i][columnName]);
  31.                 }
  32.                 html += thisHtml;
  33.             }
  34.             $("[xs-template][xs-repeat='" + repeatid + "']").after(html);
  35.             $("[xs-repeat='" + repeatid + "']").not("[xs-template]").show();
  36.         }
  37.  
  38.         function Change(page) {
  39.             var txt = "[{ID:'xxx',Name:'first" + page + "',Sex:'dddd',Tel:'123456789'}";
  40.             for (var i = 1; i < 9; i++) {
  41.                 txt += ",{ID:'123" + page + i + "',Name:'张三" + page + i + "',Sex:'男" + page + i + "',Tel:'123456789" + page + i + "'}";
  42.             }
  43.             txt += "]";
  44.             var obj = eval("(" + txt + ")");
  45.  
  46.             bindRepeat("mytable", obj)
  47.         }
  48.     </script>
  49. </head>
  50. <body>
  51.     <table class="table table-bordered table-hover">
  52.         <thead>
  53.             <tr>
  54.                 <th>编号</th>
  55.                 <th>姓名</th>
  56.                 <th>性别</th>
  57.                 <th>电话号码</th>
  58.             </tr>
  59.         </thead>
  60.         <tbody>
  61.             <tr xs-repeat="mytable" xs-template>
  62.                 <td><a href="javascript:void(0)" onclick="alert('{{ID}}')">{{ID}}</a></td>
  63.                 <td>{{Name}}</td>
  64.                 <td>{{Sex}}</td>
  65.                 <td>{{Tel}}</td>
  66.             </tr>
  67.         </tbody>
  68.     </table>
  69.     <ul class="pagination">
  70.         <li class="active"><a href="javascript:void(0)">1</a></li>
  71.         <li><a href="javascript:void(0)">2</a></li>
  72.         <li><a href="javascript:void(0)">3</a></li>
  73.         <li><a href="javascript:void(0)">4</a></li>
  74.         <li><a href="javascript:void(0)">5</a></li>
  75.         <li><a href="javascript:void(0)">6</a></li>
  76.         <li><a href="javascript:void(0)">7</a></li>
  77.         <li><a href="javascript:void(0)">8</a></li>
  78.         <li><a href="javascript:void(0)">9</a></li>
  79.         <li><a href="javascript:void(0)">10</a></li>
  80.     </ul>
  81. </body>
  82. </html>

截图效果：

Jquery 学习之路（五）grid绑定模板的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  3. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  4. jQuery 学习之路（1）：引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  5. 我的QT5学习之路（三）——模板库、工具类和控件(下)

    一.前言 作为第三篇的最后一部分,我们来看一下Qt的控件,谈到控件,就会让人想到界面的美观性和易操作性,进而想到开发的便捷性.作为windows界面开发的MFC曾经是盛行了多少年,但是其弊端也随着其他 ...

  6. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  7. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  8. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  9. jQuery 学习之路（4）：事件

    一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件

随机推荐

  1. Eclipse集成Android NDK及导出Jar和so动态库

    一.安装Cygwin 在Windows环境而又不想使用linux环境,可以安装cygwin(http://www.cygwin.com/ ),为了使用gcc注意cygwin的必选安装包在devel目录 ...

  2. bzoj2428 [HAOI2006]均分数据 模拟退火

    [HAOI2006]均分数据 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3434  Solved: 1091[Submit][Status][Dis ...

  3. Java并发之同步原语

    volatile: 定义:Java编程语言允许线程访问共享变量,为了确保共享变量内被准确和一致性地更新,线程应该确保通过排它锁单独获得这个变量.根据volatile的定义,volatile有锁的语义. ...

  4. springboot线程池@Async的使用和扩展

    我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务: 本 ...

  5. jsp 安装环境与基本语法

    1.什么是web应用程序? web应用程序是一种可以通过web访问的应用程序.web应用程序的最大好处是用户很容易访问应用程序.用户只需要有浏览器即可,不需要安装其它软件. 2.搭建 java web ...

  6. IIS7绑定多个HTTPS网站并应用自签名证书

    本文主要介绍如何在IIS中添加多个网站并使用同一个数字签名证书(win7+IIS7.5) IIS中添加站点site1,端口号为80,主机名为空.如下图: 创建证书 IIS->Server Cer ...

  7. Spring Boot 启动报错：LoggingFailureAnalysisReporter

    17:57:19: Executing task 'bootRun'... Parallel execution with configuration on demand is an incubati ...

  8. HDU 1372 Knight Moves （广搜）

    题目链接 Problem Description A friend of you is doing research on the Traveling Knight Problem (TKP) whe ...

  9. oracle 的number数据类型

    NUMBER类型细讲:Oracle number datatype 语法:NUMBER[(precision [, scale])]简称:precision --> p      scale   ...

  10. Python 语言使用中遇到的问题汇总

    1.python中的传值和传引用 和其他语言不一样,传递参数的时候,python不允许程序员选择采用传值还是传引用.Python参数传递采用的肯定是“传对象引用”的方式.实际上,这种方式相当于传值和传 ...