數據表排序被破壞的子行

不知道我如何解決這個問題，試過2天無法解決它。我想預先使用添加方法，但排序是通過排序隱藏行來運行它。隱藏的行充當子行，爲父行提供更多信息。我必須做分類工作，否則我不能做前置。數據表排序被破壞的子行

嘗試取消註釋「bSort」：false然後您會看到破損的版本。

var table = $('#example').DataTable({ 
    "bSort": false, 
    /* the problem is here, it won't work if I enable sorting*/ 
    });

工作版本

$(document).ready(function() { 
 
    var table = $('#example').DataTable({ 
 
    "bSort": false, 
 
    /* the problem is here, it won't work if I enable sorting*/ 
 
    }); 
 
    
 
    function appendRow() { 
 
      var t = $('#example').DataTable();       
 
      
 
      var node = t.row.add([ 
 
       "James Bond", 
 
       "Spy","55","$9000" 
 
       ]).node(); 
 

 
      var node2 = t.row.add([ 
 
       "<p>Full Name: James Bond Larry</p>", 
 
       null, 
 
       null, 
 
       null 
 
       ]).draw().node(); 
 

 
      $(node2).addClass('detail-row hide'); 
 
       
 
      $(node).addClass('result-row').hide().fadeIn('normal'); 
 
     }; 
 
    
 
    $('#add').click(function(){ 
 
    appendRow(); 
 
    }); 
 
    
 
    $('#example tbody').on('click','.result-row',function(){ 
 
      var tr = $(this).next('.detail-row'); 
 
      if(tr.hasClass('hide')){ 
 
       tr.removeClass('hide'); 
 
      }else{ 
 
       tr.addClass('hide'); 
 
      } 
 
     }); 
 
    
 
});

body { 
 
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #333; 
 
    background-color: #fff; 
 
} 
 
.hide{ 
 
    display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> 
 

 
    <meta charset=utf-8 /> 
 
    <title>DataTables - JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <table id="example" class="display nowrap" width="100%"> 
 
     <thead> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Age</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 

 

 

 
     <tbody> 
 
      <tr class="result-row"> 
 
      <td>Tiger Nixon</td> 
 
      <td>System Architect</td> 
 
      <td>61</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
      <tr class="detail-row hide"> 
 
      <td><p>Full Name: Tiger Nikola Nixon</p></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    
 
    <div id="add"><button>Add row</button></div> 
 
    </body> 
 
</html>

來源

2016-05-15 Jamie Jordan

你創建這個 –

小提琴當你面臨的一個問題？當bSort：是假的還是真的？ –

這裏添加兩行不是正確的方法，如果排序是真的，它會在內部破壞事物。 –

它是這樣發生的，因爲你應用上的名字列進行排序，因此數據表是相當聰明的它增加了它必須是該行.. 。所以如果你想添加在名稱列的最後刪除排序選項...

這裏是更新fiddle它做了以下事情

在這裏，我下面的配置添加了一個隱藏列與

"columnDefs": [{ 
    "targets": [ 4 ],// Hide 4th column 
    "visible": false, 
    "searchable": false 
}]

您可以編寫格式功能什麼有什麼具體的看法藏漢這裏我添加了一個表，3行，但您可以自定義

在這裏，我已經爲每addrows增加額外的行正如我們在前面所討論的，但在這裏，當用戶點擊該行我增加了一行，你可以看到單擊功能如何運作..

，這裏是一個小代碼更改：

$(document).ready(function() { 
    /* Formatting function for row details - modify as you need */ 
    function format(d) { 
    console.log(d); 
    // `d` is the original data object for the row 
    return '<table cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;">' + 
     '<tr>' + 
     '<td>Name:</td>' + 
     '<td>' + d[0] + '</td>' + 
     '</tr>' + 
     '<tr>' + 
     '<td>Full Name:</td>' + 
     '<td>' + d[4] + '</td>' + 
     '</tr>' + 
     '<tr>' + 
     '<td>Extra info:</td>' + 
     '<td>And any further details here (images etc)...</td>' + 
     '</tr>' + 
     '</table>'; 
    } 

    var table = $('#example').DataTable({ 
    "columnDefs": [{ 
     "targets": [4], 
     "visible": false, 
     "searchable": false 
     }] 
     /* the problem is here, it won't work if I enable sorting*/ 
    }); 

    function appendRow() { 
    var t = $('#example').DataTable(); 

    var node = t.row.add([ 
     "James Bond", 
     "Spy", "55", "$9000", "James Bond Larry" 
    ]).draw().node(); 

    console.log(node); 
    $(node).addClass('result-row').hide().fadeIn('normal'); 
    }; 

    $('#add').click(function() { 
    appendRow(); 
    }); 

    $('#example tbody').on('click', '.result-row', function() { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 

    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } else { 
     // Open this row 
     row.child(format(row.data())).show(); 
     tr.addClass('shown'); 
    } 
    }); 
});

reference 1 - sort

reference 2 - row.add

referece 3 - Adding row on click

來源

2016-05-16 09:46:31

數據表排序被破壞的子行

回答

相關問題