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 + "?");

            });

        });