源碼來襲！！！基於jquery的ajax分頁插件（demo+源碼）

時間 2019-11-30

標籤源碼來襲基於 jquery ajax 分頁插件 demo 欄目 JQuery 简体版

原文原文鏈接

　　前幾天打開本身的博客園主頁，發現本身的園齡居然有4年之久了，沒記錯的話剛接觸編程就知道了博客園，也就是說我入坑4年了？時光啊~。剛學習編程的時候最喜歡的就是來園子裏聽大神們吹牛逼，看着他們裝逼就以爲很過癮，也學到了不少知識和技能。說來也慚愧，本身卻沒能爲園友們分享本身的所學所得（畢竟水平爛！）。javascript

　　過去的一年也是展轉了幾個城市換了幾份工做（註定本命年不太平？）。八月份來到如今所在的公司（OTA行業），公司是作互聯網的，因此可能你們的前端都看起來很屌？以前一直從事.NET開發（如今在這邊也是），js也用的不多。因而趁着這個機會跟着你們學學js。本文要說到的插件就是在學習的過程當中本身開發的。css

　　若是你還對jQuery插件開發沒有任何瞭解，推薦一篇文章 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html（博客園的前端大神不少啊，前段時間在園子看到不少優秀的js文章）html

　　若是有javascript基礎，用過jquery，看了上面的文章，我相信媽媽不再用擔憂你不會jQuery插件開發了。前端

　　既然說到基於jQuery的ajax分頁插件，那咱們就先看看主要的代碼結構：（我以爲對我們程序員來講再優美的文字描述、介紹也比不上代碼來得實在。Talk is cheap,Show me the code!）java

　　一、首先定義一個pager對象：jquery

 1 var sjPager = window.sjPager = {
 2         opts: {
 3             //默認屬性
 4             pageSize: 10,
 5             preText: "pre",
 6             nextText: "next",
 7             firstText: "First",
 8             lastText: "Last",
 9             shiftingLeft: 3,
10             shiftingRight: 3,
11             preLeast: 2,
12             nextLeast: 2,
13             showFirst: true,
14             showLast: true,
15             url: "",
16             type: "POST",
17             dataType: "JSON",
18             searchParam: {},
19             beforeSend: null,
20             success: null,
21             complete: null,
22             error: function () {
23                 alert("抱歉,請求出錯,請從新請求！");
24             },
25         },
26         pagerElement: null,//分頁dom元素
27         commonHtmlText: {
28             //公共文本變量
29         },
30         init: function (obj, op) {
31             //對象初始化
32         },
33         doPage: function (index, pageSize, searchParam) {
34             //執行分頁方法
35         },
36         getTotalPage: function () {
37             //獲取總頁數
38         },
39         createPreAndFirstBtn: function (pageTextArr) {
40             //建立上一頁、首頁按鈕連接
41         },
42         createNextAndLastBtn: function (pageTextArr) {
43             //建立下一頁、尾頁按鈕連接
44         },
45         createIndexBtn: function (pageTextArr) {
46             //中間分頁索引按鈕連接
47         },
48         renderHtml: function (pageTextArr) {
49             //渲染分頁控件到頁面
50         },
51         createSpan: function (text, className) {
52             //建立span
53         },
54         createIndexText: function (index, text) {
55             //建立索引文本
56         },
57         jumpToPage: function () {
58             //跳轉到
59         }
60     }

　　對象包含了分頁的屬性及用到的方法，doPage()爲分頁的核心方法。
git

　　二、進行jQuery擴展程序員

1 $.fn.sjAjaxPager = function (option) {
2         return sjPager.init($(this), option);
3     };

　　三、插件使用github

1 <body>
2     
3     <table id="dataTable" border="1px"></table>
4     <div id="pager"></div>
5 </body>

 1     $(function() {
 2             $('#pager').sjAjaxPager({
 3                 url: "Handler1.ashx",
 4                 pageSize: 10,
 5                 searchParam: {
 6                     /*
 7                     * 若是有其餘的查詢條件，直接在這裏傳入便可
 8                     */
 9                     id: 1,
10                     name:'test',
11                 },
12                 beforeSend: function () {
13                 },
14                 success: function (data) {
15                     /*
16                     *返回的數據根據本身須要處理
17                     */
18                     var tableStr = "<tr><td>Id</td><td>姓名</td><td>年齡</td></tr>";
19                     $.each(data.items, function(i,v) {
20                         tableStr += "<tr><td>" + v.Id + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td></tr>";
21                     });
22 
23                     $('#dataTable').html(tableStr);
24                 },
25                 complete: function () {
26                 }
27             });
28 
29             
30         })

　　有沒有發現使用方式與直接使用ajax基本是同樣同樣的？ajax

　　最後咱們能夠看下出來的效果：（表格樣式沒有設置比較醜，分頁樣式本身也能夠根據須要修改css文件）

　　F12打開調試工具，點擊分頁查看發送的請求及響應：

　　pageIndex和pageSize爲插件默認的參數，在後臺能夠直接在Request中獲取。特別須要注意的是插件的響應也是須要遵循特定的格式{"total":0,"items":[]}，如上圖中所示total表明數據總記錄數，items表明分頁的數據。

　　這裏只有代碼的大致結構及呈現的效果，你們不妨本身先動手實現一下，須要源碼及DEMO的能夠去個人github下載：https://github.com/sujing910206/ajax-pager DEMO是.NET實現的，可是若是是其餘語言，實現的方式也都同樣。

寫在最後：

最後，請容許我矯情一下，就一下下（此處應該有害羞的表情⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）。本命年終於快過去，過去的一年離開了呆了六年的地方還有不少一塊兒玩耍的小夥伴，固然也加入了單身狗行列。來到深圳，我不知道我爲什麼來會來深圳，徹底陌生的一座城市，或許是有人告訴我這裏適合年輕人，或許是據說這裏冬天很暖和，也或許只是不想再繼續呆在原來的地方。其實從很小開始就一我的在外面求學、工做，早已習慣了一我的在外面漂泊，難道是我這一輩子註定放縱不羈愛自由？啊哈哈哈哈。剛來這邊的時候除了不適應仍是不適應，可謂人生地不熟，也沒有怎麼出去玩過。如今也是，天天基本都是兩點一線，週末才偶爾會去打打球唱唱歌來自娛自樂。終於快等到了猴年馬月，新的一年但願個人生活能更豐富、交更多的朋友（女友），領悟更多的編程思想，堅持擼代碼。好了，技術聖地不談情感，但願這篇文章對你有幫助！