Datatables内自定义按钮，并实现对table内数据的读取和操作。

最新推荐文章于 2024-08-10 07:10:26 发布

哔啵啵哔啵哔

最新推荐文章于 2024-08-10 07:10:26 发布

阅读量9.5k

点赞数 6

分类专栏： Datatables 文章标签： datatables jquery table

本文链接：https://blog.csdn.net/sinat_33065145/article/details/52503648

版权

Datatables 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

我们做表格展示的时候会常常遇到需要在每列的后边添加操作按钮的情况，比如淘宝购物车里的订单删除按钮或者详细按钮，这样就需要在加载Datatables的时候同时对每一行生成对应的操作按钮，并给操作按钮绑定方法，以实现对table内单元格数据的读取和操作。

Datatables中提供了一种render属性，可以对数据源的数据进行操作。使用方法和案例如下：

<html>
<head>
    <script src="~/Scripts/jquery-1.12.3.min.js"></script>
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#person").dataTable({    // 和<table>的id对应，指定初始化datatables。
                "pagingType": "full_numbers",
                //给table内自定义按钮
                "columnDefs": [
                    {
                        // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                        // return后边是我们希望在指定列填入的按钮代码
                        "targets": -1,
                        "render": function ( data, type, full, meta ) {
                            return "<input type = 'button' id = 'testButton' value = '点击我！'>"
                        }
                    }
                ],
                //给列赋值，这里的列名需要和data的数据名对应
                //注意这里第六列数据指定为null，用来存放我们加入的按钮
                "columns": [
                    { "data": "name" },
                    { "data": "corpname" },
                    { "data": "dynasty" },
                    { "data": "gender" },
                    { "data": "job" },
                    { "data": null}
                ],
                //填充的数据，这里用的是静态数据，数据源可以来自前台，也可以来自服务器
                "data": [
                    { "name": "黄蓉", "corpname": "丐帮", "dynasty": "南宋", "gender": "女", "job": "丐帮帮主" },
                    { "name": "郭靖", "corpname": "丐帮", "dynasty": "南宋", "gender": "男", "job": "抗金领袖" },
                    { "name": "杨过", "corpname": "古墓派", "dynasty": "南宋", "gender": "男", "job": "神雕侠" },
                    { "name": "李莫愁", "corpname": "古墓派", "dynasty": "南宋", "gender": "女", "job": "反派" },
                    { "name": "任我行", "corpname": "日月神教", "dynasty": "不明", "gender": "男", "job": "日月神教教主" },
                    { "name": "令狐冲", "corpname": "华山派", "dynasty": "不明", "gender": "男", "job": "华山派大弟子" },
                    { "name": "岳不群", "corpname": "华山派", "dynasty": "不明", "gender": "男", "job": "华山派掌门" },
                    { "name": "左冷禅", "corpname": "嵩山派", "dynasty": "不明", "gender": "男", "job": "嵩山派掌门" },
                    { "name": "张无忌", "corpname": "明教", "dynasty": "元朝", "gender": "男", "job": "明教教主" },
                    { "name": "韦小宝", "corpname": "天地会", "dynasty": "清朝", "gender": "男", "job": "青木堂堂主" },
                    { "name": "康熙", "corpname": "清政府", "dynasty": "清朝", "gender": "男", "job": "皇帝" },
                    { "name": "赵敏", "corpname": "元政府", "dynasty": "元朝", "gender": "女", "job": "郡主" },
                    { "name": "张三丰", "corpname": "武当派", "dynasty": "元朝", "gender": "男", "job": "武当创始人" }
                ]
            });
            //为我们生成的按钮绑定方法，这里是弹出姓名和职业的对话框
            $("#person tbody").on("click", "#testButton", function () {
                //获取行
                var row = $("table#person tr").index($(this).closest("tr"));
                //获取某列（从0列开始计数）的值
                var name = $("table#person").find("tr").eq(row).find("td").eq(0).text();
                var job = $("table#person").find("tr").eq(row).find("td").eq(4).text();
                alert(name + "是" + job);
            });
        });
    </script>
</head>

<body>
    <table id="person" class="display" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <td>姓名</td>
                <td>门派</td>
                <td>朝代</td>
                <td>性别</td>
                <td>职业</td>
                <td>自定义按钮</td>
            </tr>
        </thead>

        <tbody></tbody>
    </table>
</body>
</html>