前不久在網(wǎng)絡(luò)上看見一個(gè)很不錯(cuò)的jQuery的DataTable表格插件。后來發(fā)現(xiàn)在MVC中使用該插件的文章并不多。本文將介紹在MVC3.0如何使用該插件。在介紹該插件之前先簡單介紹一下，推薦該插件的原因。在項(xiàng)目中我使用jqgrid比較多。但是發(fā)現(xiàn)當(dāng)進(jìn)行樣式調(diào)整時(shí)jqgrid的樣式常常會(huì)讓美工頭疼。而datatable插件卻是一個(gè)輕量級的jQuery插件。當(dāng)我通過瀏覽器查看該js插件rander后的源碼。發(fā)現(xiàn)只是一個(gè)簡單的html table，非常簡潔。那么在沒有特殊要求的情況下使用這個(gè)插件，開發(fā)人員js腳本的可維護(hù)性將得到簡化，美工的樣式調(diào)整也會(huì)變得更輕松！下面介紹如何在MVC3.0中使用DataTable jQuery插件。

　　一、DataTable JS 核心腳本文件、 CSS文件及圖片

　　請到這里下載最新的版本的DataTable插件。該插件內(nèi)附上了具體的官方DEMO。讀者可自行閱讀，這里只介紹這個(gè)插件的核心文件

　　1.jquery.dataTables.min.js

　　壓縮后的核心js文件

　　2.官方提供的CSS文件

　　demo_page.css 、demo_table.css、 demo_table_jui.css

　　可以自定義CSS樣式來滿足客戶需求。

　　3.圖片文件

　　包含一個(gè)Images文件夾，請將該文件請全部拷貝到MVC工程的指定目錄，截圖如下：                  

　　二、DataTable 客戶端HTML及JS代碼

　　html代碼：

<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>
                標(biāo)識(shí)
            </th>
            <th>
                公司名稱
            </th>
            <th>
                地址
            </th>
            <th>
                城市
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<input type="button" id="btnTest" value="根據(jù)條件重新響應(yīng)后臺(tái)Ajax" />        

        

        
        
      
        
NET技術(shù)：分享在MVC3.0中使用jQuery DataTable 插件，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。