jQuery dataTables 过滤器在与子行结合时不起作用答案

【问题标题】：jQuery dataTables Filter Not Working When Combined With Child RowsjQuery dataTables 过滤器在与子行结合时不起作用
【发布时间】：2014-05-08 09:29:38
【问题描述】：

我正在使用 dataTables 插件并重新使用我在另一个页面上的代码来拥有一个过滤一个特定列的select。当这未能正确过滤时，我很困惑，因为它与我之前使用的代码相同。

经过检查，我现在刚刚发现原因是使用带有 dataTables 的子行 - http://datatables.net/examples/api/row_details.html

HTML

<select name="col4_filter" id="col4_filter">
    <option value="">All</option>
    <!-- Other Options -->
</select>

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

jQuery（很多，但所有数据表都相关）

if (!jQuery().dataTable) {
    return;
}

/*
 * Insert a 'details' column to the table
 */
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');


nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';

$('table thead tr').each(function() {
    this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('table tbody tr').each(function() {
    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

var oTable = $('table').dataTable({
    "sDom": 'T<"clear">lfrtip',
    "aaSorting": [],
    "aLengthMenu": [
         [15, 20, -1],
         [15, 20, "All"] // change per page values here
     ],
     // set the initial value
     "iDisplayLength": 15,
     "sPaginationType": "bootstrap",
     "oLanguage": {
         "sLengthMenu": "_MENU_ records",
         "oPaginate": {
             "sPrevious": "Prev",
             "sNext": "Next"
         }
     }
 });


 /* Formatting function for row details */
 function fnFormatDetails (oTable, nTr, row_id) {
     var id = row_id.split('_').pop();

     var sOut = '<table>';
     sOut += '<tr><td id="details_' + id + '">Finding Child Rows... <img src="/images/portal/loading.gif" alt="Finding Child Rows..." /></td></tr>';
     sOut += '</table>';

     $.ajax({
         type: 'GET',
         url: '/ajax_find_child_rows',
         dataType: "html",
         data: { id: id }, 
         success: function(data) {
             $('#details_' + id).html(data);
         },
         error: function() {
             $('#details_' + id).html('No child rows found');
         }   

     });

     return sOut;
 }


 /* Add event listener for opening and closing details
  * Note that the indicator for showing which row is open is not controlled by DataTables,
  * rather it is done here
  */
 $('table').on('click', 'tbody td .row-details', function() {
     var nTr = $(this).parents('tr')[0];

     if (oTable.fnIsOpen(nTr)) {
         /* This row is already open - close it */
         $(this).addClass("row-details-close").removeClass("row-details-open");
         oTable.fnClose(nTr);
     } else {
         /* Open this row */     
         var row_id = ($(this).parent().parent().attr('id'));           

         $(this).addClass("row-details-open").removeClass("row-details-close");
         oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr, row_id), 'details');
     }
 });

function fnFilterColumn(i) {
     oTable.fnFilter($('#col'+(i+1)+'_filter').val(), i);
}

$("#col4_filter").change( function() { fnFilterColumn(3); });

症状是过滤器无法工作并在选择空白选项时重置。

例如只在索引中添加一个是行不通的：

$("#col4_filter").change( function() { fnFilterColumn(4); }); // 4 instead of 3 (selector doesn't matter just now)

在过滤器失败后重置select 后，过滤器不会重置。

奇怪的是，如果我使用上一列 ($("#col4_filter").change( function() { fnFilterColumn(2); });)，那么它会由于某种原因起作用。

我猜是列插入弄乱了过滤器，因为列的索引已关闭。

【问题讨论】：

你可以试试我的 yadcf 插件yadcf-showcase.appspot.com（还没有在有子行的表上测试过）
谢谢，如果我没有得到任何地方，我会试一试。

标签： jquery html datatables jquery-datatables

【解决方案1】：

抱歉，刚刚意识到我的错误是什么。

function fnFilterColumn(i) {

    oTable.fnFilter($('#col4_filter').val(), i);  // hard-coding selector
}

$("#col4_filter").change( function() { fnFilterColumn(4); }); // add 1 to the column index to account for dynamically added column

我在发现错误时很困惑，我不记得当我更改列索引时，fnFilterColumn 会寻找一个不存在的元素值来过滤。

【讨论】：