前端頁面表格排序 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/