datatables 获取隐藏列的值

最新推荐文章于 2021-08-10 23:48:33 发布

悟世君子

最新推荐文章于 2021-08-10 23:48:33 发布

阅读量2.3k

点赞数 1

分类专栏： datatables

本文链接：https://blog.csdn.net/wsjzzcbq/article/details/87919021

版权

datatables 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

datatables 通过 "visible": false, 属性控制列的隐藏

datatables 如何获取隐藏列的 data 属性值，看如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" type="text/css"  />
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js" type="text/javascript"></script>
    </head>
    <body>
        <table id="table_id" class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th class="text-center">隐藏id</th>
                    <th class="text-center">编号</th>
                    <th class="text-center">作者</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script>
            $(document).ready( function () {
                $('#table_id').DataTable({
                    language : {
                        "lengthMenu" : '每页显示<select class="form-control input-xsmall">'
                                        + '<option value="10">10</option>'
                                        + '<option value="20">20</option>'
                                        + '<option value="30">30</option>'
                                        + '<option value="40">40</option>'
                                        + '<option value="50">50</option>' + '</select>条',
                        "paginate" : {
                                        "first" : "首页",
                                        "last" : "尾页",
                                        "previous" : "上一页",
                                        "next" : "下一页"
                                    },
                        "processing" : "加载中...",  //DataTables载入数据时，是否显示‘进度’提示  
                        "emptyTable" : "暂无数据",
                        "info" : "共 _PAGES_ 页  _TOTAL_ 条数据  ",
                        "infoEmpty" : "暂无数据",
                        "emptyTable" : "暂无要处理的数据...",  //表格中无数据
                        "search": "搜索:",
                        "infoFiltered" : " —— 从  _MAX_ 条数据中筛选",
                        "zeroRecords":    "没有找到记录"
                                },
                    serverSide : true,//是否开启服务器模式
                    ajax : {
                        url: 'http://localhost:8089/d/getList',
                        type: 'post',
                        data : function(d){
                            var book = {};	
                            book.pageSize = d.length;
                            book.draw = d.draw;
                            book.offset = d.start;
                            return book;
                        }
                            },	
                    columns: [
                        {
                            "data": "id",
                            "name" : "id",
                            "visible": false,
                            "sDefaultContent":"",  //默认空字符串
                            "sClass": "text-center"
                        },
                        {
                            "orderable" : false,
                            "data": "author",		        	
                            'sClass': "text-center"		         		        	
                        },		        
                        {
                            "orderable" : false,
                            "data": "name",	        	
                            'sClass': "text-center"	 	         	       	
                        },
                        {
                            "orderable" : false,
                            "targets" : 3,//操作按钮目标列
                            "data" : null,
                            "sWidth" :"350px",
                            'sClass': "text-center",
                            "render" : function(data, type,row,meta) {
                                        var html = "";
                                        html += "<button id='testButton' style='margin-right:10px;'  "+
                                        "class='delete btn btn-success'  ><i class='fa  icon-key'></i> 获取隐藏id</button>"
                                        return html;
                            }
                        }
                            ]
                    });
            });
			
            //获取隐藏列的值的方法
            $("#table_id tbody").on("click", "#testButton", function () {
                //获取行
                var row = $("table#table_id tr").index($(this).closest("tr"));
                var id = $('#table_id').DataTable().row(row-1).data().id;
                alert(id)
            });
        </script>  
    </body>
</html>

数据库数据如下

运行效果

悟世君子

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
datatables 获取隐藏列的值

datatables 通过 "visible": false, 属性控制列的隐藏datatables 如何获取隐藏列的 data 属性值，看如下代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt
复制链接

扫一扫