现在位置首页 / 项目实战 /正文

jquery datatables入门介绍及示例

作者: IT小兵 | 2015年4月14日| 热度:℃ | 评论: |参与:

最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables。

功能是很强大,但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。

官网地址:http://www.datatables.net/

官网上的例子比较简单,基础的介绍还是要看看的。

效果图

 

引入相应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 处理的吧。。。)

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

后台代码

开启后台处理之后,每次翻页、排序都会调用代码中配置的地址:/Home/Home/GetUserList

回传很多参数,我们这里只用到这几个:

页面大小:iDisplayLength

开始数:iDisplayStart(是开始数不是当前页数...)

要排序的列序号:iSortCol_0(从零开始)

正序还是倒序:sSortDir_0(desc or asc)

获取第一列列明:mDataProp_0(从零开始)

好了上代码

[HttpGet]
        public string GetUserList()
        {
            //JsonConvert.PopulateObject(
             var re = new UserRequest();
            //获取页面大小
            if (string.IsNullOrWhiteSpace(Request["iDisplayLength"]))
                re.PageSize = 10; 
            else
                re.PageSize = int.Parse(Request["iDisplayLength"]);
            //获取开始数 算出当前页数
            if (string.IsNullOrWhiteSpace(Request["iDisplayStart"]))
                re.PageIndex = 1; 
            else
                re.PageIndex = (int.Parse(Request["iDisplayStart"]) / re.PageSize) + 1;
            //自定义的两个参数 Division和UserName
            if (!string.IsNullOrWhiteSpace(Request["Division"]))
                re.Division = Request["Division"];
            if (!string.IsNullOrWhiteSpace(Request["UserName"]))
                re.User_Ename = Request["UserName"];
            //排序
            if (!string.IsNullOrWhiteSpace(Request["iSortCol_0"]) && !string.IsNullOrWhiteSpace(Request["sSortDir_0"]))
                re.OrderBy = Request[("mDataProp_" + Request["iSortCol_0"])];// +" " + Request["sSortDir_0"];
            else
                re.OrderBy = Request[("mDataProp_0")];
            //正序还是倒序
            if(!string.IsNullOrWhiteSpace(Request["sSortDir_0"]))
                re.Isdesc=(Request["sSortDir_0"]=="descdesc"?true:false);
            var result = new DataResult();
            var data = this.AccountService.GetUserList(re);//获取数据的方法
            result.recordsTotal = data.TotalItemCount;
            result.recordsFiltered = data.TotalItemCount;
            result.data = data;
            return JsonConvert.SerializeObject(result);
        }
public class UserRequest : Request
    {
        public UserRequest() { Isdesc = false; }
        public string User_Ename { get; set; }
        public string Division { get; set; }
        public bool IsValid { get; set; }
        public long User_ID { get; set; }
        public string OrderBy { get; set; }
        public bool Isdesc { get; set; }
    }
    public class DataResult
        {
            public int draw { get; set; }
            public int recordsTotal { get; set; }
            public int recordsFiltered { get; set; }
            public object data;
        }

参考更多:

http://www.cnblogs.com/178mz/p/4383519.html


[Jquery DataTable+jsp实现demo]

[JQuery将DataTable、list<>数据转换成JSON数据]

[Jquery DataTable宽度设置百分比造成的高度撑开问题(宽度固定)]

[Jquery DataTable行/单元格支持右键菜单--jquery-smartMenu的使用]

[Jquery DataTable 设置表头宽度]

[Jquery DataTable 2个表格联动]

[Jquery插件DataTable的使用问题总结]

[jquery 实现多个DataTable并存,并css控制排版(asp.net服务)]

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询