如何使用Datatable插件

时间:2018-04-20 06:53:27

标签: javascript jquery datatable

我有这个数据表,我正在使用 Datatable 插件,我希望在点击按钮时清除它并使用从ajax获得的一些新值重新绘制它。问题是我无法使用删除所有页面中的数据。只清空第一页的数据。下面是我使用的代码..

$(document).ready(function(){
$.ajax({ 
    type: "POST", 
    url: "filename.php", 
    dataType: "JSON",
    data: {some_data},       
    success: function(data2)
    { 
        variable=data2;
                //console.log(data2);
        $('#table1').find('td').remove();
        $("#table1").find("tr:gt(0)").remove();
        var cr = data2.length;
                //console.log(cr);
        var i;
        for(i=0;i<cr;i++)
        {
         //Adding data to table here                                
        }
            }
        });//Ajax code ends here 
        });

控制台中的错误显示

table-datatables-managed.min.js:1未捕获的ReferenceError:App未定义     在table-datatables-managed.min.js:1

请帮助!

更新完整代码:

   $.ajax({ 
            type: "POST", 
            url: "getentryforhwtry.php", 
            dataType: "JSON",
            data: {deptselect_val:checkboxes2,
                    blckselect_val:checkboxes,
                    subblckselect_val:subblockcheckboxes,
                    subnetselect_val:ipcheckboxes,
                    filename_val:filename},      
            success: function(data2)
            { 
                variable=data2;
                console.log(data2);
                var otable=$('#table1').dataTable();
                otable.fnClearTable();

                /*$('#table1').find('td').remove();
                $("#table1").find("tr:gt(0)").remove();*/

                var cr = data2.length;
                console.log(cr);
                var i;
        for(i=0;i<cr;i++)
        {

        $('#table1 tr:last').after('<tr class=\'t1\'><td>'+data2[i].uname+'</td><td>'+data2[i].ccode+'</td><td>'+data2[i].roomno+'</td><td>'+data2[i].Sub_block+'</td><td>'+data2[i].ipv4+'</td><td>'+data2[i].ipv6+'</td><td>'+data2[i].jackno+'</td><td>'+data2[i].vlanid+'</td><td>'+data2[i].comments+'</td><td><a href=\"delete.php?uname='+data2[i].uname+'\"><input type=\'submit\' id=\'delete\' value=\'del\' class=\'btn btn-xs purple\' /></a><a href=\"edit.php?uname='+data2[i].uname+'\"><input type=\'submit\' id=\'edit\' value=\'edit\' class=\'btn btn-xs purple\' /></a><a href=\"view.php?uname='+data2[i].uname+'\"><input type=\'submit\' id=\'view\' value=\'view\' class=\'btn btn-xs purple\' /></a></td></tr>');                                      
                    }
            }
        });//Ajax code ends here 
        });

修改
解决了!!问题在于 jQuery 冲突,可以使用

解决
jQuery.noConflict();

谢谢。欢呼!

1 个答案:

答案 0 :(得分:0)

您可以使用功能

dataTable.fnClearTable();

它将清除表的tbody,然后您可以向datatable添加新行。

文档链接为here

更新

$(document).ready(function() {
  var oTable = $('#example').dataTable();
  oTable.fnClearTable();
} );