时间戳

首页 > 解决方案 > 在条件下显示数据表中的特定子行

javascript - 在条件下显示数据表中的特定子行

问题描述

我想在特定条件下显示特定行的子行，例如，如果孩子的性别是男性，我只想显示子行，并且此信息也可以在子行本身中找到。

在我下面的代码中，它展开/折叠所有子行。我该如何解决这个问题？

function(data) {
    var table = $('#childInfoTable').DataTable( {   
    ajax: 'childdata',
    "dom": 'rt',
    select:"single",
    "columns": [
                {
                "className": 'childInfoShow',
                "orderable":  false,
                "defaultContent": '',
                width:"15px"
                },
             { "data": "id" },
             { "data": "name" }
             ]
            });

    $('#childInfoTable tbody').on('click', 'td.childInfoShow', function() {

    var tr = $(this).closest('tr');
    var row = table.row(tr);        

    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child(format(row.data())).show();
        tr.addClass('shown');
        }

});

标签： javascriptjquerydatatabledatatables

解决方案

检查这个例子。希望这会有所帮助。fnRowCallback()将帮助您在创建表格时访问每一行，因此您可以检查该行是否包含男性或女性并据此隐藏该行。根据此示例，如果该行包含性别为“男性”的数据，它将隐藏该特定行。

var data = [{name: "Sri",
gender: 'male'},
{name: "Sara", gender: "female"},
{name:"paul", gender: "male"}
]

$('#dtable').dataTable({
	data: data,
  columns: [{
  	data: 'name'
  },
  {data: 'gender'}],
  fnRowCallback: function(nRow, aData, iDisplayIndex){
  if(aData.gender == 'male'){
  	$(nRow).hide();
  }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="dtable">
  <thead><tr><th>Name</th><th>Gender</th></tr></thead>
  <tbody>
  </tbody>
</table>

推荐阅读