2015-10-07 55 views
2

DataTable中的最新版本(1.10)选择事件,部分在表初始化设置数据表1.10 - 禁用行中的某些列

var table = $('#companies').DataTable({ 
      language: { url: langUrl }, 
      select: true, 
      .... 

点击任意单元将选出的行... 然而,如果我用于滑动子行显示的第一列,我想避免行选择(这第一列有一个'细节控制'类..

与旧的Datatable版本,可以做以下,使用TableTools

"fnPreRowSelect": function (e, nodes) { 
    if ($(e.currentTarget).hasClass('details-control')) { 
     return false; 
    } 
    return true; 
} 

这就是我所测试的,但在最新版本中,TableTools已经被遗留下来了,现在使用Select/Button是一种推荐的做法... 任何人都知道如何获得与新版本相同的行为?

感谢灯..

回答

1

您可以使用select.selector选项或select.selector()功能。

这里是它的演示: http://live.datatables.net/pokopiju/1/edit

$(document).ready(function() { 
 
        
 
    var table = $('#example').DataTable({ 
 
    fixedColumns: { 
 
     leftColumns: 1, 
 
     rightColumns: 1 
 
    }, 
 
    select: { 
 
     style: 'single', 
 
     info: false, 
 
     selector: 'td:not(.status)' 
 
    }, 
 
    columnDefs: [ 
 
     { 
 
     targets: -1, 
 
     className: "dt-body-center status" 
 
     } 
 
    ], 
 
    scrollY:  "300px", 
 
    scrollX:  true, 
 
    scrollCollapse: true, 
 
    paging:   false, 
 
    orderCellsTop: true, 
 
    order: [[1, 'asc']], 
 
    colReorder: { 
 
     realtime: false, 
 
    }, 
 
    autoWidth: false, 
 
    }); 
 
});
body { 
 
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #333; 
 
    background-color: #fff; 
 
} 
 
.simon-toggle { 
 
    width: 90px; 
 
    height: 30px; 
 
} 
 

 
.simon-toggle-ignored, .simon-toggle-accepted, .simon-toggle-declined { 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    border-radius: 2px; 
 
    margin-left: 0.5px; 
 
    margin-right: 0.5px; 
 
} 
 

 
.simon-toggle-ignored { 
 
    background-color: grey; 
 
    border: 1px solid grey; 
 
} 
 

 
.simon-toggle-accepted { 
 
    background-color: white; 
 
    border: 1px solid green; 
 
} 
 

 
.simon-toggle-declined { 
 
    background-color: white; 
 
    border: 1px solid red; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script> 
 
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.js"></script> 
 
<link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.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>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tfoot> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
     </tfoot> 
 

 
     <tbody> 
 
      <tr> 
 
      <td>Tiger Nixon</td> 
 
      <td>System Architect</td> 
 
      <td>Edinburgh</td> 
 
      <td>61</td> 
 
      <td>2011/04/25</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Garrett Winters</td> 
 
      <td>Director</td> 
 
      <td>Edinburgh</td> 
 
      <td>63</td> 
 
      <td>2011/07/25</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Ashton Cox</td> 
 
      <td>Technical Author</td> 
 
      <td>San Francisco</td> 
 
      <td>66</td> 
 
      <td>2009/01/12</td> 
 
      <td>$4,800</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Cedric Kelly</td> 
 
      <td>Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>22</td> 
 
      <td>2012/03/29</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jenna Elliott</td> 
 
      <td>Financial Controller</td> 
 
      <td>Edinburgh</td> 
 
      <td>33</td> 
 
      <td>2008/11/28</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Brielle Williamson</td> 
 
      <td>Integration Specialist</td> 
 
      <td>New York</td> 
 
      <td>61</td> 
 
      <td>2012/12/02</td> 
 
      <td>$4,525</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Herrod Chandler</td> 
 
      <td>Sales Assistant</td> 
 
      <td>San Francisco</td> 
 
      <td>59</td> 
 
      <td>2012/08/06</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Rhona Davidson</td> 
 
      <td>Integration Specialist</td> 
 
      <td>Edinburgh</td> 
 
      <td>55</td> 
 
      <td>2010/10/14</td> 
 
      <td>$6,730</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Colleen Hurst</td> 
 
      <td>Javascript Developer</td> 
 
      <td>San Francisco</td> 
 
      <td>39</td> 
 
      <td>2009/09/15</td> 
 
      <td>$5,000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Sonya Frost</td> 
 
      <td>Software Engineer</td> 
 
      <td>Edinburgh</td> 
 
      <td>23</td> 
 
      <td>2008/12/13</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jena Gaines</td> 
 
      <td>System Architect</td> 
 
      <td>London</td> 
 
      <td>30</td> 
 
      <td>2008/12/19</td> 
 
      <td>$5,000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Quinn Flynn</td> 
 
      <td>Financial Controller</td> 
 
      <td>Edinburgh</td> 
 
      <td>22</td> 
 
      <td>2013/03/03</td> 
 
      <td>$4,200</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Charde Marshall</td> 
 
      <td>Regional Director</td> 
 
      <td>San Francisco</td> 
 
      <td>36</td> 
 
      <td>2008/10/16</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Haley Kennedy</td> 
 
      <td>Senior Marketing Designer</td> 
 
      <td>London</td> 
 
      <td>43</td> 
 
      <td>2012/12/18</td> 
 
      <td>$4,800</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tatyana Fitzpatrick</td> 
 
      <td>Regional Director</td> 
 
      <td>London</td> 
 
      <td>19</td> 
 
      <td>2010/03/17</td> 
 
      <td>$2,875</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Michael Silva</td> 
 
      <td>Senior Marketing Designer</td> 
 
      <td>London</td> 
 
      <td>66</td> 
 
      <td>2012/11/27</td> 
 
      <td>$3,750</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Paul Byrd</td> 
 
      <td>Javascript Developer</td> 
 
      <td>New York</td> 
 
      <td>64</td> 
 
      <td>2010/06/09</td> 
 
      <td>$5,000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Gloria Little</td> 
 
      <td>Systems Administrator</td> 
 
      <td>New York</td> 
 
      <td>59</td> 
 
      <td>2009/04/10</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Bradley Greer</td> 
 
      <td>Software Engineer</td> 
 
      <td>London</td> 
 
      <td>41</td> 
 
      <td>2012/10/13</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Dai Rios</td> 
 
      <td>System Architect</td> 
 
      <td>Edinburgh</td> 
 
      <td>35</td> 
 
      <td>2012/09/26</td> 
 
      <td>$4,200</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jenette Caldwell</td> 
 
      <td>Financial Controller</td> 
 
      <td>New York</td> 
 
      <td>30</td> 
 
      <td>2011/09/03</td> 
 
      <td>$4,965</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Yuri Berry</td> 
 
      <td>System Architect</td> 
 
      <td>New York</td> 
 
      <td>40</td> 
 
      <td>2009/06/25</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Caesar Vance</td> 
 
      <td>Technical Author</td> 
 
      <td>New York</td> 
 
      <td>21</td> 
 
      <td>2011/12/12</td> 
 
      <td>$4,965</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Doris Wilder</td> 
 
      <td>Sales Assistant</td> 
 
      <td>Edinburgh</td> 
 
      <td>23</td> 
 
      <td>2010/09/20</td> 
 
      <td>$4,965</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Angelica Ramos</td> 
 
      <td>System Architect</td> 
 
      <td>London</td> 
 
      <td>36</td> 
 
      <td>2009/10/09</td> 
 
      <td>$2,875</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Gavin Joyce</td> 
 
      <td>Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>42</td> 
 
      <td>2010/12/22</td> 
 
      <td>$4,525</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jennifer Chang</td> 
 
      <td>Regional Director</td> 
 
      <td>London</td> 
 
      <td>28</td> 
 
      <td>2010/11/14</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Brenden Wagner</td> 
 
      <td>Software Engineer</td> 
 
      <td>San Francisco</td> 
 
      <td>18</td> 
 
      <td>2011/06/07</td> 
 
      <td>$3,750</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Ebony Grimes</td> 
 
      <td>Software Engineer</td> 
 
      <td>San Francisco</td> 
 
      <td>48</td> 
 
      <td>2010/03/11</td> 
 
      <td>$2,875</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Russell Chavez</td> 
 
      <td>Director</td> 
 
      <td>Edinburgh</td> 
 
      <td>20</td> 
 
      <td>2011/08/14</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Michelle House</td> 
 
      <td>Integration Specialist</td> 
 
      <td>Edinburgh</td> 
 
      <td>37</td> 
 
      <td>2011/06/02</td> 
 
      <td>$3,750</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Suki Burks</td> 
 
      <td>Developer</td> 
 
      <td>London</td> 
 
      <td>53</td> 
 
      <td>2009/10/22</td> 
 
      <td>$2,875</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Prescott Bartlett</td> 
 
      <td>Technical Author</td> 
 
      <td>London</td> 
 
      <td>27</td> 
 
      <td>2011/05/07</td> 
 
      <td>$6,730</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Gavin Cortez</td> 
 
      <td>Technical Author</td> 
 
      <td>San Francisco</td> 
 
      <td>22</td> 
 
      <td>2008/10/26</td> 
 
      <td>$6,730</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Martena Mccray</td> 
 
      <td>Integration Specialist</td> 
 
      <td>Edinburgh</td> 
 
      <td>46</td> 
 
      <td>2011/03/09</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Unity Butler</td> 
 
      <td>Senior Marketing Designer</td> 
 
      <td>San Francisco</td> 
 
      <td>47</td> 
 
      <td>2009/12/09</td> 
 
      <td>$3,750</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Howard Hatfield</td> 
 
      <td>Financial Controller</td> 
 
      <td>San Francisco</td> 
 
      <td>51</td> 
 
      <td>2008/12/16</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Hope Fuentes</td> 
 
      <td>Financial Controller</td> 
 
      <td>San Francisco</td> 
 
      <td>41</td> 
 
      <td>2010/02/12</td> 
 
      <td>$4,200</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Vivian Harrell</td> 
 
      <td>System Architect</td> 
 
      <td>San Francisco</td> 
 
      <td>62</td> 
 
      <td>2009/02/14</td> 
 
      <td>$4,965</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Timothy Mooney</td> 
 
      <td>Financial Controller</td> 
 
      <td>London</td> 
 
      <td>37</td> 
 
      <td>2008/12/11</td> 
 
      <td>$4,200</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jackson Bradshaw</td> 
 
      <td>Director</td> 
 
      <td>New York</td> 
 
      <td>65</td> 
 
      <td>2008/09/26</td> 
 
      <td>$5,000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Miriam Weiss</td> 
 
      <td>Support Engineer</td> 
 
      <td>Edinburgh</td> 
 
      <td>64</td> 
 
      <td>2011/02/03</td> 
 
      <td>$4,965</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Bruno Nash</td> 
 
      <td>Software Engineer</td> 
 
      <td>London</td> 
 
      <td>38</td> 
 
      <td>2011/05/03</td> 
 
      <td>$4,200</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Odessa Jackson</td> 
 
      <td>Support Engineer</td> 
 
      <td>Edinburgh</td> 
 
      <td>37</td> 
 
      <td>2009/08/19</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Thor Walton</td> 
 
      <td>Developer</td> 
 
      <td>New York</td> 
 
      <td>61</td> 
 
      <td>2013/08/11</td> 
 
      <td>$3,600</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Finn Camacho</td> 
 
      <td>Support Engineer</td> 
 
      <td>San Francisco</td> 
 
      <td>47</td> 
 
      <td>2009/07/07</td> 
 
      <td>$4,800</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Elton Baldwin</td> 
 
      <td>Data Coordinator</td> 
 
      <td>Edinburgh</td> 
 
      <td>64</td> 
 
      <td>2012/04/09</td> 
 
      <td>$6,730</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Zenaida Frank</td> 
 
      <td>Software Engineer</td> 
 
      <td>New York</td> 
 
      <td>63</td> 
 
      <td>2010/01/04</td> 
 
      <td>$4,800</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Zorita Serrano</td> 
 
      <td>Software Engineer</td> 
 
      <td>San Francisco</td> 
 
      <td>56</td> 
 
      <td>2012/06/01</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jennifer Acosta</td> 
 
      <td>Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>43</td> 
 
      <td>2013/02/01</td> 
 
      <td>$2,875</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Cara Stevens</td> 
 
      <td>Sales Assistant</td> 
 
      <td>New York</td> 
 
      <td>46</td> 
 
      <td>2011/12/06</td> 
 
      <td>$4,800</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Hermione Butler</td> 
 
      <td>Director</td> 
 
      <td>London</td> 
 
      <td>47</td> 
 
      <td>2011/03/21</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Lael Greer</td> 
 
      <td>Systems Administrator</td> 
 
      <td>London</td> 
 
      <td>21</td> 
 
      <td>2009/02/27</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Jonas Alexander</td> 
 
      <td>Developer</td> 
 
      <td>San Francisco</td> 
 
      <td>30</td> 
 
      <td>2010/07/14</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Shad Decker</td> 
 
      <td>Regional Director</td> 
 
      <td>Edinburgh</td> 
 
      <td>51</td> 
 
      <td>2008/11/13</td> 
 
      <td>$5,300</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Michael Bruce</td> 
 
      <td>Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>29</td> 
 
      <td>2011/06/27</td> 
 
      <td>$4,080</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Donna Snider</td> 
 
      <td>System Architect</td> 
 
      <td>New York</td> 
 
      <td>27</td> 
 
      <td>2011/01/25</td> 
 
      <td>$3,120</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </body> 
 
</html>

5

你可以简单地deselect()行,你不想被选择:

table.on('select.dt', function(e, dt, type, indexes) { 
    indexes.forEach(function(i) { 
    if (table.row(i).nodes().to$().children(':first').hasClass('details-control')) { 
     table.row(i).deselect(); 
    }  
    })  
}); 

它与单个和多个选择。演示 - >http://jsfiddle.net/snpekxff/

+1

感谢您的建议,但是我的目标是避免这些细胞被用来“选择”的行... ('select',该行已被选中... – erwin