jquery datatables使用

引入相應css 和js

<link href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

 頁面HTML

<div class="portlet-body p10">
            <div class="form-body ">
          
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label class="control-label col-md-3">User Name: </label>
                            <div class="col-md-6">
                                <input id="txt_UserName" name="txt_UserName" type="text" value="" />
                                <span class="help-block">This is inline help </span>
                            </div>
                        </div>
                    </div>
                    <!--/span-->
                    <div class="col-md-5">
                        <div class="form-group">
                            <label class="control-label col-md-4">Division：</label>
                            <div class="col-md-6 form-inline">
                                 
                                <select id="Sel_Division" name="Gender">
                                    <option value="">所有</option>
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                 
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--/span-->
                </div>
                  <div class="row">
                    <div class="col-md-5">
                   
                        
                    </div>
                    <!--/span-->
                    <div class="col-md-5">
                        <div class="form-group">
                           <button type="submit" id="btn_Search" class="btn green">Search</button>
                        </div>
                    </div>
                    <!--/span-->
                </div>
            </div>
        </div>
        <div class="portlet-body p10">
            <table class="table table-striped table-bordered table-hover" id="UserList">
                <thead>
                    <tr>
                        <th>User ID
                        </th>
                        <th>User Ename
                        </th>
                        <th>AD Account
                        </th>
                        <th>User Email
                        </th>
                        <th>Division
                        </th>
                        <th>Entity
                        </th>
                        <th>IsValid
                        </th>
                        <th>Operation
                        </th>
                    </tr>
                </thead>
            </table>
        </div>

 JS 代碼 初始化

var oTable = null;
var initUserList = function () {
    var table = $('#UserList');
if (oTable == null) { //僅第一次檢索時初始化Datatable   
        oTable = table.dataTable({
            "bLengthChange": false, //改變每頁顯示數據數量
            "bFilter": false, //過濾功能
            "bProcessing": true, //開啓讀取服務器數據時顯示正在加載中……特別是大數據量的時候，開啓此功能比較好
            "bServerSide": true, //開啓服務器模式，使用服務器端處理配置datatable。注意：sAjaxSource參數也必須被給予爲了給datatable源代碼來獲取所需的數據對於每一個畫。 這個翻譯有點彆扭。
            "iDisplayLength": 10,//每頁顯示10條數據
            //ajax地址 
            "sAjaxSource": "/Home/Home/GetUserList",// get地址
            //"sAjaxSource": "/Home/Home/UserListPost",// post地址
            "fnServerData": retrieveData,//執行方法
      
            //默認排序
            "order": [
                [0, 'asc']//第一列正序
            ],
            "lengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 10,
            //向服務器傳額外的參數
            "fnServerParams": function (aoData) {
                aoData.push(
                    { "name": "UserName", "value": $('#txt_UserName').val() },//員工名字
                    { "name": "Division", "value": $('#Sel_Division').val() })//所處Division
            },
            //配置列要顯示的數據
            "columns": [
            { "data": "User_ID" },
            { "data": "User_Ename" },
            { "data": "AD_Account" },
            { "data": "User_Email" },
            { "data": "Division" },
            { "data": "Entity" },
             { "data": "IsValid" },
            { "data": "" }//操做按鈕列
            ],
             
            //按鈕列
            "columnDefs": [
                //{
            //    "targets": -2,//編輯
            //    "data": null,
            //    "defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button>"
            //},
            {
                "targets": -1,//刪除
                "data": null,
                "defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button><button id='delrow' class='btn btn-primary' type='button'><i class='fa fa-trash-o'></i></button>"
            }
            ] ,
            
            //語言配置--頁面顯示的文字
            "language": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "emptyTable": "No data available in table",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "No entries found",
                "infoFiltered": "(filtered1 from _MAX_ total entries)",
                "lengthMenu": "Show _MENU_ entries",
                "search": "Search:",
                "zeroRecords": "No matching records found"
            }
           
          
        });
    }
   
    //刷新Datatable，會自動激發retrieveData   
    oTable.fnDraw();
    // tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
   
}
function retrieveData(sSource, aoData, fnCallback) {
    /* get 方法調用*/
    $.ajax({
        "type": "get",
        "contentType": "application/json",
        "url": sSource,
        "dataType": "json",
        "data": aoData, 
        "success": function (resp) {
            fnCallback(resp); //服務器端返回的對象的returnObject部分是要求的格式  
        }
    });
    /* Post 方法調用
    $.ajax({
        "type": "post",
        
        "url": sSource,
        "dataType": "json",
        "data": aoData,
        "success": function (resp) {
            fnCallback(resp); //服務器端返回的對象的returnObject部分是要求的格式  
        }
    });*/
}

jQuery(document).ready( function  () {

             initUserList()

             //搜索

             $( "#btn_Search" ).click( function  () {

                 initUserList()

             })

             //按鈕的綁定事件要放到document或者其餘父標籤上，由於元素是在datatable方法加載完成以後才顯示出來的

             //編輯

             $( ".portlet-body" ).on( 'click' ,  'button#editrow' ,  function  () {

                 var  data = $( "#UserList" ).DataTable().row($( this ).parents( "tr" )).data();

                 alert(data.User_Ename +  "'s Division is: "  + data.Division);

             });

             //刪除

             $( ".portlet-body" ).on('click ', ' button #delrow', function () {

                 var  data = $( "#UserList" ).DataTable().row($( this ).parents( "tr" )).data();

                 alert( "Do you want delete "  + data.User_Ename +  "?" );

             });

         });