Jquery DataTables自學筆記 之 自定義佈局

$(document).ready(function() {

    $('#example').dataTable({

    "sDom": '<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>'

    });

});

 

//自定義佈局

//*  l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class    * Examples: <"wrapper"flipt>, <lf<t>ip>

 

//語法結構

/*

    <> 表示一個閉合DIV

    例：<> = <div></div>

     

    <"類名稱"> 表示一個帶類名稱的閉合DIV

    例：<"top"> = <div class="top"></div>

     

    l - 每行顯示的記錄數

    f - 搜索框

    t - 表格

    i - 表格信息

    p - 分頁條

    r - 加載時的進度條

*/

 

//綜合應用

/*

    例：<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>

    表示

    <div class="top">

        表格信息(i)

        搜索框(f)

        每行顯示的記錄數(l)

        分頁條(p)

        <div class="clear"></div>

    </div>

    加載時的進度條(bottom)

    表格(t)

    <div class="top">

        表格信息(i)

        每行顯示的記錄數(l)

        分頁條(p)

        <div class="clear"></div>

    </div>

*/