且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

从JQuery数据表中删除特定的行

更新时间:2023-02-02 21:35:51

您需要确保已拥有thead:

<div id="first">
    <table id="firstTable">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Yes/No</th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" data-user="Yes">
                <td>1 One</td>
                <td>1 Two</td>
                <td>1 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>2 One</td>
                <td>2 Two</td>
                <td>2 Three</td>
                <td>No</td>
            </tr>
            <tr>
                <td>3 One</td>
                <td>3 Two</td>
                <td>3 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>5 One</td>
                <td>5 Two</td>
                <td>5 Three</td>
                <td>No</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="second">
    <table id="secondTable">

        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Yes/No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1 One</td>
                <td>1 Two</td>
                <td>1 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>2 One</td>
                <td>2 Two</td>
                <td>2 Three</td>
                <td>No</td>
            </tr>
            <tr>
                <td>3 One</td>
                <td>3 Two</td>
                <td>3 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>5 One</td>
                <td>5 Two</td>
                <td>5 Three</td>
                <td>No</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="third">
    <table id="thirdTable">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Yes/No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1 One</td>
                <td>1 Two</td>
                <td>1 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>2 One</td>
                <td>2 Two</td>
                <td>2 Three</td>
                <td>No</td>
            </tr>
            <tr>
                <td>3 One</td>
                <td>3 Two</td>
                <td>3 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>4 One</td>
                <td>4 Two</td>
                <td>4 Three</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>5 One</td>
                <td>5 Two</td>
                <td>5 Three</td>
                <td>No</td>
            </tr>
        </tbody>
    </table>
</div>

这将停止DataTables的抱怨,然后可以这样创建DataTables:

Which will stop DataTables complaining, then your DataTables can be created like this:

$(function() {
     var firstTable = $('#firstTable').DataTable();
     var secondTable = $('#secondTable').DataTable({
         "initComplete": function(settings) {
             var api = this.api();
             api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                 var data = this.data();
                 if (data && data[3] !== "Yes") {
                     api.rows(rowIdx).nodes().to$().addClass('remove');
                 }
             });
             api.rows('.remove').remove().draw();
         }
     });
     var thirdTable = $('#thirdTable').DataTable({
         "initComplete": function(settings) {
             var api = this.api();
             api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                 var data = this.data();
                 if (data && data[3] !== "No") {
                     api.rows(rowIdx).nodes().to$().addClass('remove');
                 }
             });
             api.rows('.remove').remove().draw();
         }
     });
 });

JSFiddle此处工作.希望能有所帮助(TBH可能有更好的方法-也许其他人会加入进来,因为这确实很受黑客欢迎-值得一看的东西总是有帮助的……JSFiddle是您的朋友).

Working JSFiddle here. Hope that helps (there are probably better ways of doing it TBH - perhaps someone else will chip in as this is quite hackie - it always helps to have something to look at... JSFiddle is your friend).