时间戳

首页 > 解决方案 > 使用 jquery 添加、删除或编辑后数据表未更新

jquery - 使用 jquery 添加、删除或编辑后数据表未更新

问题描述

$(document).ready(function(){
    $('#table').DataTable();
    $('#add').on('click',()=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
                    var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
                    $('#name').val()+'</td><td>'
                    +$("#age").val()+
                    '</td><td>'+
                    '<button type="button"  class="edit" >Edit</button>'+
                    '</td></tr>';
                    $('#table tbody').append(addrow);
                    $('.add-input').val('');
                    $(this).dialog("close");
                }
            }
        });    
    })
    $("#delete").on("click", function () {
        $('table tr').has('input:checked').remove();
    })
    $('#deleteall').on('click',function(){
        $('tbody tr').remove();
    })
    $('tbody').on('click',".edit",(event)=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
        var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
        $('#name').val()+'</td><td>'
        +$("#age").val()+
        '</td><td>'+
        '<button type="button"  class="edit" >Edit</button>'+
        '</td></tr>';
        $(event.currentTarget).parents('tr').replaceWith(name);
        console.log($('tr'));
        $('.add-input').val('');
        $(this).dialog("close");
        }
        }
    })    
    })
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table edit</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="tab-mod.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
</head>
<body>
    <div class="table-wrap">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Age</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Prabhu</td>
                <td>21</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            
        </tbody>
    </table>
    </div>
    <div class="op">
    <button type="button"  class="mod" id="add">Add</button>
    <button type="button"  class="mod" id="delete">Delete</button>
    <button type="button"  class="mod" id="deleteall">Delete All</button>

    </div>
    <div class="popup" id="popup" style="display:none;">
        <input type="text" placeholder="Name" class="add-input" id="name">
        <input type="number" placeholder="Age" class="add-input" id="age">
    </div>  
    
</body>
</html>

使用我的代码添加、删除或编辑行后，我无法使用搜索选项搜索新添加的行。搜索时未显示新添加的行。我认为当我添加或编辑一行时表格没有更新。此外，当我使用 delete 或 deleteall 时，当我搜索已删除的行时，该行仍然存在。我该如何克服呢？谢谢！

标签： jqueryhtmldatatables

解决方案

删除所有

要删除您需要使用clear()的所有行此方法只是从 DataTables 中删除所有行，导致数据长度集为 0。然后可以使用该rows.add()方法添加新数据。

参考：https://datatables.net/reference/api/clear()

添加新行

要添加新行，您需要使用row.add(). 参考：https://datatables.net/reference/api/row.add()

删除一行

要删除您需要使用的一行row().remove()，此方法（及其复数对应方法rows().remove()）将从 DataTable 中完全删除选定的行，从浏览器中删除为数据和节点分配的内存。

参考：https://datatables.net/reference/api/row().remove()

    $(document).ready(function(){
    var t = $('#table').DataTable();
    $('#add').on('click',()=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
                    t.row.add( [
                        '<input type="checkbox" class="select">',
                        $('#name').val(),
                        $("#age").val(),
                        ''
                    ] ).draw( false );
                    $(this).dialog("close");
                }
            }
        });    
    })
    $("#delete").on("click", function () {
        //$('table tr').has('input:checked').remove();
        t.row( $('table tr').has('input:checked') )
        .remove()
        .draw();
    })
    $('#deleteall').on('click',function(){
        //t.$('tbody tr').remove();
        t.clear().draw();
    })
    $('tbody').on('click',".edit",(event)=>{
        $("#popup").dialog({
            width:400,
            modal:true,
            resizeable:false,
            buttons:{
                "Submit":function(){
        var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
        $('#name').val()+'</td><td>'
        +$("#age").val()+
        '</td><td>'+
        '<button type="button"  class="edit" >Edit</button>'+
        '</td></tr>';
        $(event.currentTarget).parents('tr').replaceWith(name);
        console.log($('tr'));
        $('.add-input').val('');
        $(this).dialog("close");
        }
        }
    })    
    })
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table edit</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="tab-mod.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
</head>
<body>
    <div class="table-wrap">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Age</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Prabhu</td>
                <td>21</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="select"></td>
                <td>Sakthi</td>
                <td>20</td>
                <td><button type="button"  class="edit" >Edit</button></td>
            </tr>
            
        </tbody>
    </table>
    </div>
    <div class="op">
    <button type="button"  class="mod" id="add">Add</button>
    <button type="button"  class="mod" id="delete">Delete</button>
    <button type="button"  class="mod" id="deleteall">Delete All</button>

    </div>
    <div class="popup" id="popup" style="display:none;">
        <input type="text" placeholder="Name" class="add-input" id="name">
        <input type="number" placeholder="Age" class="add-input" id="age">
    </div>  
    
</body>
</html>

推荐阅读