jquery 數據表隱藏列

Question

jquery 數據表插件有沒有辦法隱藏（和顯示）表列？

我想出了如何重新加載表數據：使用fnClearTable和fnAddData 。

但我的問題是，在我的表格視圖之一（例如隱藏模式）中，我不想顯示某些列。

Answer 1

您可以通過此命令隱藏列：

fnSetColumnVis( 1, false );

第一個參數是列的索引，第二個參數是可見性。

通過： http ： //www.datatables.net/api - function fnSetColumnVis

Answer 2

如果有人再次進入這里，這對我有用......

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

Answer 3

動態隱藏列

之前的答案是使用遺留DataTables語法。 在v 1.10+中，您可以使用column（）。visible（） ：

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

要隱藏多個列，可以使用columns（）。visible（） ：

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

這是一個小提琴演示 。

初始化表時隱藏列

要在初始化表時隱藏列，可以使用columns選項：

$('#example').DataTable( {
    'columns' : [
        null,
        //hide the second column
        {'visible' : false },
        null,
        //hide the fourth column
        {'visible' : false }
    ]
});

對於上述方法，您需要為應保持可見且未指定其他列選項的列指定null 。 或者，您可以使用columnDefs來定位特定列：

$('#example').DataTable( {
    'columnDefs' : [
        //hide the second & fourth column
        { 'visible': false, 'targets': [1,3] }
    ]
});

Answer 4

您可以在數據表初始化期間定義它

"aoColumns": [{"bVisible": false},null,null,null]

Answer 5

對於任何使用服務器端處理並使用隱藏列將數據庫值傳遞到jQuery的人，我建議使用“sClass”參數。 您將能夠使用css display：none來隱藏列，同時仍能夠檢索其值。

CSS：

th.dpass, td.dpass {display: none;}

在datatables init中：

"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "dpass"

//編輯：記得將隱藏的類添加到你的單元格中

Answer 6

您可以嘗試如下隱藏/顯示動態運行時

隱藏 ：fnSetColumnVis（1，false，false）;

示例： oTable.fnSetColumnVis（item，false，false）;

顯示 ：fnSetColumnVis（1，true，false）;

示例： oTable.fnSetColumnVis（item，false，false）;

這里，oTable是Datatable的對象。

Answer 7

使用api你可以使用

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

看看這個信息：

在此輸入鏈接描述

Answer 8

如果使用來自json的數據並使用Datatable v 1.10.19 ，則可以執行以下操作：

更多信息

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

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});

Answer 9

var example = $('#exampleTable').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

Target屬性定義column的位置.Visible屬性負責列的可見性。負責搜索facility的可搜索屬性。如果設置為false，則該列不能用於搜索。

Answer 10

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
});});

Answer 11

注意：已接受的解決方案現已過時，並且是遺留代碼的一部分。 http://legacy.datatables.net/ref這些解決方案可能不適合那些使用較新版DataTables的人（現在遺留下來）對於較新的解決方案：您可以使用： https ： //datatables.net/reference/ API /列（）。可見（）

替代方案你可以實現一個按鈕： https ： //datatables.net/extensions/buttons/built-查看提供的鏈接下的最后一個選項，允許有一個可以切換列可見性的按鈕。

Answer 12

希望這會幫助你。 我在一些列上使用此搜索解決方案，但我不想在前端顯示它們。

$(document).ready(function() {
        $('#example').dataTable({
            "scrollY": "500px",
            "scrollCollapse": true,
            "scrollX": false,
            "bPaginate": false,
            "columnDefs": [
                { 
                    "width": "30px", 
                    "targets": 0,
                },
                { 
                    "width": "100px", 
                    "targets": 1,
                },
                { 
                    "width": "100px", 
                    "targets": 2,
                },              
                { 
                    "width": "76px",
                    "targets": 5, 
                },
                { 
                    "width": "80px", 
                    "targets": 6,
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 8 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 9 ],
                    "visible": false,
                    "searchable": true
                },
              ]
        });
    });

Answer 13

"columns": [
    { "data": "id", "class": "text-nowrap" },
    { "data": "requester", "class": "text-nowrap display-none" },
    { "data": "requesterName", "class": "text-nowrap" },
    { "data": "placeWork_CityID", "class": "text-nowrap display-none" },
    { "data": "placeWork_CityName", "class": "text-nowrap" },]

HTML

<tr>
    <th class="text-nowrap"></th>
    <th class="text-nowrap">Mã yêu cầu</th>
    <th class="text-nowrap display-none">Mã người yêu cầu</th>
    <th class="text-nowrap">Tên người yêu cầu</th>
    <th class="text-nowrap display-none">Mã thành phố/tỉnh làm việc</th>
    <th class="text-nowrap">Tên thành phố/tỉnh làm việc</th>
</tr>

css

//Update css
th.display-none, td.display-none {
    display: none;
}

Answer 14

看看我的解決方案

我有這個HTML table Head

<thead>
    <tr>
        <th style="width: 20%">@L("Id")</th>
        <th style="width: 20%">@L("IdentityNumber")</th>
        <th style="width: 20%">@L("Name")</th>
        <th style="width: 20%">@L("MobileNumber")</th>
        <th style="width: 20%">@L("RegistrationStatus")</th>
        <th style="width: 20%">@L("RegistrationStatusId")</th>
        <th style="width: 20%; text-align: center;" data-hide="phone">@L("Actions")</th>
    </tr>
</thead>

我的Ajax request返回了這樣的東西

所以我想隱藏Id索引[0]和RegistrationStatusId索引[5]

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
        ]
    });
});

我希望這會對你有所幫助