前端頁面表格排序 jQuery Table 基礎

　　通常來說， 排序的方式有兩種， 一種是我們在查詢的時候就排好序，然后將數據渲染到前台頁面上， 但是這樣做有個弊端，就是在爭對做好了緩存處理的系統， 在查詢相同數據的時候進行排序，可能不能成功， 因為進行排序的數據和之前的數據是相同的， 第二次排序數據是直接從緩存中取，所以數據庫進行排序就不能滿足這個需求。 另一種方法就是前端進行排序，利用DOM和jQuery 將當前頁面中所有的數據進行排序， 這樣做的好處是可以避免大量的后台交互， 每一次與后台的交互都會浪費很多的資源， 尤其是在並發量比較大的系統， 這種寫法顯然是不可取的。 那么我們如何用DOM + jQuery 進行排序呢？  當然有大神封裝好的代碼(不推薦自己寫， 自己寫的要耗費很大的時間， 而且在性能方面可能不是特別好)，廢話不多說， 直接看教程.......

　　第一步： 我們了解我們這個排序僅限於表格排序， 他所用到的插件是 jQuery.tablesorter.js  這個插件在哪里下載呢？  

　　　　插件下載地址： http://tablesorter.com/docs/

　　　　官方文檔以及demo： http://mottie.github.io/tablesorter/docs/index.html

　　　　下載完了之后能，你可以先用前端的工具打開試一下，畢竟學習一個新東西， 我們要看看他的原理嘛， 原理我就不羅嗦了， 我們主要看的是 在demo中，

　　　　 需要引入什么js文件，然后我們對應的加入js文件就好了

　　　　

　　　　在demo中  我們明顯的看到了 需要三個主要的js文件，在這里有個提醒， 一定要將jQuery文件先引入 ！！！！！！！！！

第二步：  表格要規范構建好  這個就不多說了

第三步：  就是在html中寫一些js 代碼了 代碼非常簡單， 只需要寫幾行就可以了 ， 只需要在script標簽中加入一下代碼即可大功告成

　　　

<script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
    </script>

 然后就可以直接使用了.............

 

推薦博文： https://www.cnblogs.com/rsky/p/4998757.html　　

推薦官方資料： http://tablesorter.com/docs/