关于jquery插件datatables的简单应用

最新推荐文章于 2025-07-01 14:21:23 发布

转载最新推荐文章于 2025-07-01 14:21:23 发布 · 541 阅读

jquery 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用DataTables插件增强网页表格的功能性与用户体验，包括实现数据展示、分页、排序及搜索等功能，并通过实例代码展示了具体配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//这里模拟从后台传过来经过处理的数据
var s = [["22","22","1","22","22","22"],["33","33","1","33","33","33"],["44","44","1","44","",""],["55","55","1","","",""],["66","66","1","","",""],["77","77","1","77","",""]]
        //alert(s);

        oTable = $('#example').dataTable( {
       //在表格中点击得到数据
        "fnInitComplete": function () {
            var
                that = this,
                nTrs = this.fnGetNodes();
            $('td', nTrs).click( function () {
                //alert(nTrs[1].toString());
                id = this.innerHTML;
                //alert(this.parentNode.firstChild.innerHTML);
                //alert(id);
            } );
        },
        "bDestroy":true,//重新加载是设置的属性
        "aaData": s,
        "aoColumns": [  //表格列的名字
            { "sTitle": "用户id","bVisible": "false" },
            { "sTitle": "username" },
            { "sTitle": "sex" },
            { "sTitle": "age", "sClass": "center" },
            {  "sTitle": "email" },
            { "sTitle":"mobile" }
        ],
        "oLanguage": {                          //汉化
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有检索到数据",
                "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
                "sInfoEmtpy": "没有数据",
                "sProcessing": "正在加载数据...",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前页",
                    "sNext": "后页",
                    "sLast": "尾页"
                }

        },
        "sPaginationType":"full_numbers",//样式
        "iDisplayLength": 8                    //每页显示8条数据
    } )

用完之后忽然发现datatables插件在对数据表格处理的反面的功能真的挺强大，里面还有很多有用的功能。