最近在使用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>
截圖效果：
