jQuery datatables 表格插件介绍

程序员文章站 2022-04-03 10:56:01

...

一、Datatables简介

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的

二、如何使用

在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务。

1、DataTables的默认配置

$(document).ready(function() { 
    $('#example').dataTable(); 
});

2、DataTables的一些基础属性配置

"bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3、数据排序

$(document).ready(function() {
    $('#example').dataTable({
        "aaSorting": [[4, "desc"]]
    });
});

从第0列开始，以第4列倒序排列

4、隐藏某些列

$(document).ready(function() {
    $('#example').dataTable({
        "aoColumnDefs": [{
            "bSearchable": false,
            "bVisible": false,
            "aTargets": [2]
        },
        {
            "bVisible": false,
            "aTargets": [3]
        }]
    });
});

5、国际化

$(document).ready(function() {
    $('#example').dataTable({
        "oLanguage": {
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            },
            "sZeroRecords": "没有检索到数据",
            "sProcessing": ""
        }
    });
});

6、排序功能：

$(document).ready(function() {
    $('#example').dataTable({
        "aoColumns": [null, {
            "asSorting": ["asc"]
        },
        {
            "asSorting": ["desc", "asc", "asc"]
        },
        {
            "asSorting": []
        },
        {
            "asSorting": []
        }]
    });
});

7、数据获取支持4种：如下

DOM 文档数据
Javascript array js数组
Ajax source Ajax请求数据
Server side processing 服务器端数据

三、实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：

添加功能---单击add按钮，弹出对话框，添加新的内容。
编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。

3、编码：

//声明jquery datatables 
    
    .....//datatables内容，此处省略 
  
Name 
        
       Value 
        
       DisplayOrder 
       
    


//添加按钮 
//编辑按钮 
//删除按钮 
  
  
//声明dialog,异步更新 
  @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
  UpdateTargetId = "d_Attributes", 
  OnSuccess = "dialogClose", 
  HttpMethod = "Post", 
})) 
  { 
    

Name 
           
           * 
        

Value 
           
            * 
        

DisplayOrder 
           
            * 
        

 
            
 
        
 
  }

代码说明,这段代码主要分了两个部分。

第一部分是jquery datatables的声明，

；

第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码如下：


function dialogClose() {
    $("#e_Attributes").dialog("close");
}

$("#e_Attributes").dialog({
    modal: true,
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    },
    width: 400
});

var editor;

$(function() {
    //声明datatable 
    $("#gridtable").dataTable().fnDestroy();
    editor = $('#gridtable').dataTable({
        "bInfo": false,
        "bServerSide": false,
        'bPaginate': false,
        //是否分页。 
        "bProcessing": false,
        //当datatable获取数据时候是否显示正在处理提示信息。 
        'bFilter': false,
        //是否使用内置的过滤功能。 
        'bLengthChange': false,
        //是否允许用户自定义每页显示条数。 
        'sPaginationType': 'full_numbers',
        //分页样式 
    });
    //单击，赋值，改样式 
    $("#gridtable tbody tr").click(function(e) {
        if ($(this).hasClass('row_selected')) {
            $(this).removeClass('row_selected');
            putNullValue()
        } else {
            editor.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
            var aData = editor.fnGetData(this);
            if (null != aData) {
                putValue(aData);
            }
        }
    });
    //双击 
    $("#gridtable tbody tr").dblclick(function() {
        if ($(this).hasClass('row_selected')) {
            //$(this).removeClass('row_selected'); 
        } else {
            editor.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }

        var aData = editor.fnGetData(this);
        if (null != aData) {
            putValue(aData);
        }

        $("#hiddenValue").val("edit");
        $("#e_Attributes").dialog("open");

    });
    //添加 
    $("#add").click(function() {
        editor.$('tr.row_selected').removeClass('row_selected');
        putNullValue();

        $("#hiddenValue").val("add");
        $("#e_Attributes").dialog("open");
    });
    //编辑 
    $("#edit").click(function() {
        var productAttributeID = $("#productAttributeID").val();
        if (productAttributeID != "" && productAttributeID != null) {
            $("#hiddenValue").val("edit");
            $("#e_Attributes").dialog("open");
        }

    });
    //删除 
    $("#delete").click(function() {
        var productAttributeID = $("#productAttributeID").val();
        var productID = $("#productID").val();
        if (productAttributeID != null && productAttributeID != "") {
            if (confirm("Delete?")) {
                $.ajax({
                    type: "GET",
                    url: "@Url.Action("DeleteAttribute ", "Product ")",
                    data: {
                        ProductID: productID,
                        ProductAttributeID: productAttributeID
                    },
                    //参数名要和Action 中的参数名相同 
                    dataType: "html",
                    cache: false,
                    success: function(result) {
                        $("#d_Attributes").html(result);
                        $("#productAttributeID").val(null);
                    }
                });
            }
        }
    });

    //赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了） 
    function putNullValue() {。。。。。。／／此处省略
    }
    //赋值 
    function putValue(aData) {。。。。。。 //此处省略 
    }
});

$.ajaxSetup({
    cache: false
});

这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。

添加功能效果图

jQuery datatables 表格插件介绍

编辑功能效果图：

jQuery datatables 表格插件介绍

删除效果图：

jQuery datatables 表格插件介绍

到此，功能已经全部实现，所需的代码也已经贴出。

4、分页实现

引入CSS文件和JS文件

 
   
 -------------------------------------------------------------------------- 
   
-----------最简单的方式： 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 
   
----------也可以自己定义各属性：

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

如果没有 thead 将会报错。


bPaginate: 是否分页，默认为 true，分页
	iDisplayLength : 每页的行数，每页默认数量:10
	sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。
	bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。
	bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom
	bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

以上就是关于jQuery表格插件datatables用法的详细介绍

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频



javascript怎么将值类型强制转为字符串


javascript中什么是位运算符


总结分享： 6 种JavaScript的打断点的方...


javascript怎么判断字符串是否是数字


jQuery datatables 表格插件介绍




jquery 的安装


jQuery 第一个jquery程序


jQuery  juery与原生js 的区别


jQuery 对象与 DOM 对象之间的转换


jQuery 基础选择器(一)




网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论











专题推荐


独孤九贱-php全栈开发教程全栈  170W+
主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门


玉女心经-web前端开发教程入门  80W+
主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门


天龙八部-实战开发教程实战  120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习





作者信息




认证0级讲师



发布技术文章


最新文章
热门排行




javascript中什么是位运算符
javascript怎么将值类型强制转为字符串
javascript怎么判断字符串是否是数字
JavaScript怎么求多个数的平均值
聊聊Angular中父子组件间怎么传递数据
总结分享： 6 种JavaScript的打断点的方式（收藏学习）
Node项目中用images+imageinfo库给图片批量添加水印
javascript怎么去掉小数点后两位



JS 是什么意思
json格式是什么？json格式文件怎么打开？
RN布局的实例详解
sqrt函数怎么使用
js数组如何删除指定位置的元素？删除指定位置元素的2种方法
2021年前端vue面试题大汇总（附答案）
echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）
如何理解vue数据双向绑定原理





推荐视频教程

javascript初级视频教程


jquery 基础视频教程




视频教程分类

php视频教程
html视频教程
css视频教程
JS视频教程
jQuery视频教程
mysql视频教程
Linux视频教程
Python视频教程






网站首页 
PHP视频
PHP实战
PHP代码
PHP手册
词条
手记
编程词典
php培训

：公益在线php培训，帮助PHP学习者快速成长！
Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作