Question

我正在尝试从jquery datatable获取所选行。当我选择一行时，它不会被选中。我想选择多行并获取它们的值。当我运行示例代码时它工作正常，但是当我在我的表中使用它时，它不起作用。

代码是：

$(document).ready(function () {   
    var table = $('#listings_table').DataTable({    
        "sDom": "<'row'<'col col-lg-6'l><'col col-lg-6'f>r>t<'row'<'col col-lg-6'i><'col col-lg-6'p>>",
        "sPaginationType": "full_numbers",
    });

    $('#listings_table tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });

    $('#button').click(function () {
        //alert("aaaaaa");
        var ids = $.map(table.rows('.selected').data(), function (item) {
            return item[0]
        });
       // alert(ids);
        alert(table.rows('.selected').data().length + ' row(s) selected');
    });
});

HTML TABLE是：

<button id="button">btn</button>

<table id="listings_table" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th style="width:2%" width="20"><input type="checkbox" id="check_all"></th>
        <th style="width:5%;" class="th-sortable" data-toggle="class"> Name <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:5%;" class="th-sortable" data-toggle="class"> Father Name <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:5%;" class="th-sortable" data-toggle="class"> Refferedby <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:5%;" class="th-sortable" data-toggle="class"> CV <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:10%;" class="th-sortable" data-toggle="class"> Applied for <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:10%;" class="th-sortable" data-toggle="class"> Contact # <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <!--                        <th style="width:10%;" class="th-sortable" data-toggle="class">     Location <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>-->
        <th style="width:10%;" class="th-sortable" data-toggle="class"> Email <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:10%;" class="th-sortable" data-toggle="class"> Birth date <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:10%;" class="th-sortable" data-toggle="class"> Status <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
        <th style="width:5%;" class="th-sortable" data-toggle="class"> profile <span class="th-sort"><i class="icon-sort-down text"></i><i class="icon-sort-up text-active"></i><i class="icon-sort"></i></span></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td width="20" align="center"><input type="checkbox" name="post[]" value="21" class="checkbox"></td>
        <td>New test QA1</td>
        <td>aaaa</td>
        <td>New test QA2</td>
        <td><a href="http://localhost/base/jobapplications/New test QA1/CV_Test.docx" download=""> Download </a></td>
        <td>Admin 1</td>
        <td>11111</td>
        <td>zaib@t.com</td>
        <td>1994-12-18</td>
        <td>
            <select name="jobstatus" style="width:100px;" id="jobstatus">
                <option selected value="4,21,job">Hired</option>
                <option value="1,21,job">New</option>
                <option value="2,21,job">Interview</option>
                <option value="3,21,job">Rejected</option>
            </select>
        </td>
        <td>
            <a href="http://localhost/base/index.php/interview/viewprofile?id=21"> View profile</a>
        </td>
    </tr>
    <tr>
        <td width="20" align="center"><input type="checkbox" name="post[]" value="24" class="checkbox"></td>
        <td>New test QA1asd</td>
        <td>aabq</td>
        <td>New test 21</td>
        <td><a href="undefined" download=""> Download </a></td>
        <td>JUNIOR HR</td>
        <td>11111</td>
        <td>zaib@te.com</td>
        <td>1994-07-07</td>
        <td>
            <select name="jobstatus" style="width:100px;" id="jobstatus">
                <option selected value="2,24,job">Interviewd</option>
                <option value="1,24,job">New</option>
                <option value="3,24,job">Rejected</option>
                <option value="4,24,job">Hired</option>
            </select>
        </td>
        <td>
            <a href="http://localhost/base/index.php/interview/viewprofile?id=24"> View profile</a>
        </td>
    </tr>
</tbody>

Answer 1

$("#table tr").click(function(){
   $(this).toggleClass('selected');    
   var value=$(this).find('td:first').html();  
});

$('.ok').on('click', function(e){
   $("#table tr.selected").each(function(index, row) {
      addId($(row).find("td:first").html());
   });
});

function addId(selectID){
alert(selectID);
}

以下是一个示例小提琴：http://jsfiddle.net/65JPw/2009/

如果是数据表：

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#button').click( function () {
        alert( JSON.stringify(table.rows('.selected').data()));
    } );
} );

小提琴：https://jsfiddle.net/7v6vfqqu/

从jquery数据表中获取选定的行不起作用

1 个答案: