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

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

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

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script src="../Script/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("[xs-template]").hide();

            $("a").click(function () {

                $("li").removeClass("active");

                $(this).parent().addClass("active");

                Change($(this).text());

            });

            Change(1);

        });

        function bindRepeat(repeatid, data) {

            $("[xs-repeat='" + repeatid + "']").not("[xs-template]").remove();

            var template = $("[xs-template][xs-repeat='" + repeatid + "']").prop("outerHTML");

            var arrMatch = template.match(/{{[^{]*}}/g);//{{ID}}匹配

            var html = "";

            for (var i = 0; i < data.length; i++) {

                var thisHtml = template.replace("xs-template=\"\"", "");

                for (var j = 0; j < arrMatch.length; j++) {

                    var columnName = $.trim(arrMatch[j].replace(/{|}/g, ""));

                    var regColumn = new RegExp(arrMatch[j], "g");

                    thisHtml = thisHtml.replace(regColumn, data[i][columnName]);

                }

                html += thisHtml;

            }

            $("[xs-template][xs-repeat='" + repeatid + "']").after(html);

            $("[xs-repeat='" + repeatid + "']").not("[xs-template]").show();

        }

        function Change(page) {

            var txt = "[{ID:'xxx',Name:'first" + page + "',Sex:'dddd',Tel:'123456789'}";

            for (var i = 1; i < 9; i++) {

                txt += ",{ID:'123" + page + i + "',Name:'张三" + page + i + "',Sex:'男" + page + i + "',Tel:'123456789" + page + i + "'}";

            }

            txt += "]";

            var obj = eval("(" + txt + ")");

            bindRepeat("mytable", obj)

        }

    </script>

</head>

<body>

    <table class="table table-bordered table-hover">

        <thead>

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>电话号码</th>

            </tr>

        </thead>

        <tbody>

            <tr xs-repeat="mytable" xs-template>

                <td><a href="javascript:void(0)" onclick="alert('{{ID}}')">{{ID}}</a></td>

                <td>{{Name}}</td>

                <td>{{Sex}}</td>

                <td>{{Tel}}</td>

            </tr>

        </tbody>

    </table>

    <ul class="pagination">

        <li class="active"><a href="javascript:void(0)">1</a></li>

        <li><a href="javascript:void(0)">2</a></li>

        <li><a href="javascript:void(0)">3</a></li>

        <li><a href="javascript:void(0)">4</a></li>

        <li><a href="javascript:void(0)">5</a></li>

        <li><a href="javascript:void(0)">6</a></li>

        <li><a href="javascript:void(0)">7</a></li>

        <li><a href="javascript:void(0)">8</a></li>

        <li><a href="javascript:void(0)">9</a></li>

        <li><a href="javascript:void(0)">10</a></li>

    </ul>

</body>

</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. matlab特殊符号表

    Character Sequence Symbol Character Sequence Symbol Character Sequence Symbol \alpha α \upsilon υ \s ...

  2. C++智能指针 auto_ptr

    C++智能指针 auto_ptr auto_ptr 是一个轻量级的智能指针, 定义于 memory (非memory.h)中, 命名空间为 std. auto_ptr 适合用来管理生命周期比较短或者不 ...

  3. stout代码分析之十一：hashmap和multihashmap

    hashmap是std::unordered_map的子类,前者对后者的接口做了进一步封装. hashmap的移动构造函数: hashmap(std::map<Key, Value>&am ...

  4. kubernetes--应用程序健康检查

    版权声明:本文属于原创,欢迎转载,转载请保留出处:http://blog.csdn.net/liyingke112 http://blog.csdn.net/liyingke112/article/d ...

  5. Linux系统iptables查看、设置、保存、备份和恢复

    不同linux系统,相关软件是否安装,会让iptables的某些命令不能执行,这里收集了大多数iptables命令,不管是Ubuntu还是Centos,都能找到相关的修改.查询.保存命令. 仅允许某些 ...

  6. async/await 里的并行和串行

    我们在使用 async/await 语法时,有时会这样用: function getName () { return new Promise((resolve, reject)=>{ setTi ...

  7. 阿里C++研发实习二面和三面面经

    下午连着面了阿里爸爸的二面和三面,非常不明白别人的三面都是hr了,为什么我还是在技术面,难道面了个假阿里.不管怎么样,来篇面经攒攒人品. 二面 第一次遇到这么严肃的面试官,居然可以全程无表情的,面了这 ...

  8. 确保web安全的https、确认访问用户身份的认证（第七章、第八章）

    第七章 确保web安全的https 1.http的缺点: (1)通信使用明文,内容可能会被窃听 (2)不验证通信方的身份,因此有可能遭遇伪装 (3)无法证明报文的完整性,因此有可能已遭篡改. 2.通信 ...

  9. [洛谷P3304] [SDOI2013]直径

    洛谷题目链接:[SDOI2013]直径 题目描述 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅 ...

  10. 图连通性【tarjan点双连通分量、边双联通分量】【无向图】

    根据 李煜东大牛:图连通性若干拓展问题探讨 ppt学习. 有割点不一定有割边,有割边不一定有割点. 理解low[u]的定义很重要. 1.无向图求割点.点双联通分量: 如果对一条边(x,y),如果low ...