datatables 获取隐藏列的值

我会带着你远行 2022-04-23 13:12 268阅读 0赞

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>

数据库数据如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20220317/f44e7791e62b4309a6933eb797da8005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20220317/041be4c7c43d479dab4f7ac1daff45a1.png