Phá hủy và tạo lại một Datatables jQuery

Question

Tôi có hai datatables jQuery với xử lý phía máy chủ. Tôi có một hộp kiểm nơi tôi ẩn và hiển thị hai bảng. Tôi muốn hủy bỏ những thứ không được hiển thị và tạo một bảng khác. Làm thế nào tôi sẽ làm điều này?

Đây là những gì tôi đã thử nhưng ajax.reload không kích hoạt.

if ($('#mode').is(':checked')) { 
    Table2.ajax.reload(); 
    Table1.clear(); 
    Table1.destroy(); 
} else { 
    Table1.ajax.reload(); 
    Table2.clear(); 
    Table2.destroy() 
} 

var Table1 = $('#timesheet-table').DataTable({}) 
var Table2 = $('#timesheet-table-2').DataTable({}) 

Answer 1

như tôi thấy nó, bạn sẽ không bao giờ hiển thị 2 dữ liệu trong trang của bạn vậy tại sao không chỉ sử dụng. bạn có thể khởi tạo dữ liệu của mình và sử dụng một chuỗi như thế này

table.destroy(); 
$('#myTable').empty(); 
table = $('#myTable').DataTable({ 
     columns: json.columns, 
     data: json.rows 
}); 

để tạo lại khi cần.

Answer 2

Bạn có thể thử cách giải quyết đơn giản và tải lại trang và chuyển cờ hoặc một thứ gì đó trong chuỗi truy vấn mà bạn kiểm tra tải trang để cho biết bảng dữ liệu nào bạn muốn tải.

Bằng cách tải lại trang, bạn sẽ đặt lại DOM và về cơ bản phá hủy bất kỳ bảng nào đã được tải trước đó.

Ví dụ:

$(document).ready(function { 

var flag = getUrlVars()["flag"]; 

if(flag != 1) { 

     Table2 = $('#timesheet-table-2').DataTable({}) 

} else { 

     Table1 = $('#timesheet-table').DataTable({}) 

} 

} 


function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

Answer 3

Bạn có thể thử một cái gì đó như thế này (Đây là một fiddle có thể giúp):

function loadDataTable(type) { 
    $('#dataTableDiv').empty(); 
    $('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>'); 

    var table1_columnList = [{ 
    "data": "otherId", 
    "title": "Other ID" 
    }, { 
    "data": "firstName", 
    "title": "First Name" 
    }, { 
    "data": "lastName", 
    "title": "Last Name" 
    }, { 
    "data": "gender", 
    "title": "Gender" 
    }]; 

    var table2_columnList = [{ 
    "data": "id", 
    "title": "ID" 
    }, { 
    "data": "firstName", 
    "title": "First Name" 
    }, { 
    "data": "lastName", 
    "title": "Last Name" 
    }, { 
    "data": "gender", 
    "title": "Gender" 
    }, { 
    "data": "dob", 
    "title": "DOB" 
    }, { 
    "data": "race", 
    "title": "Race" 
    }]; 

    var columnList = ""; 

    if (type == 'table1') 
    columnList = table1_columnList; 
    else 
    columnList = table2_columnList; 


    myTable = $('#example').DataTable({ 
    "sPaginationType": "full_numbers", 
    data: datavar, 
    columns: columnList, 
    responsive: true, 
    }); 

} 

Answer 4

theo này: https://datatables.net/reference/api/ajax.reload() ajax.reload() nó chỉ cho tải lại dữ liệu của dữ liệu có thể định từ một luồng từ xa, không tải lại chính dữ liệu đó

Tôi nghĩ bạn phải làm điều gì đó như sau:

if($('#mode').is(':checked')) { 

    Table2 = $('#timesheet-table-2').DataTable({}) 
    Table1.clear(); 
    Table1.destroy(); 

} else { 
    Table1 = $('#timesheet-table').DataTable({}) 
    Table2.clear(); 
    Table2.destroy() 
} 



var Table1 = $('#timesheet-table').DataTable({}) 
var Table2 = $('#timesheet-table-2').DataTable({}) 

Answer 5

Bạn phải xóa nội dung div cho phá hủy đúng

if($('#mode').is(':checked')) { 
     Table2 = $('#timesheet-table-2').DataTable({}) 
     Table1.clear(); 
     Table1.destroy(); 
     $('#timesheet-table').empty(); 
} 

else { 
    Table1 = $('#timesheet-table').DataTable({}) 
    Table2.clear(); 
    Table2.destroy(); 
    $('#timesheet-table-2').empty(); 
} 

Answer 6

if ($('#mode').is(':checked')) { 
    Table2.ajax.reload(); 
    Table1.clear(); 
    Table1.destroy(); 
} else { 
    Table1.ajax.reload(); 
    Table2.clear(); 
    Table2.destroy() 
} 

var Table1 = $('#timesheet-table').DataTable({ 
    ajax: "data.json"; 
}) 
var Table2 = $('#timesheet-table-2').DataTable({ 
    ajax: "data.json"; 
}) 

Bạn cần cung cấp url ajax để sử dụng phương pháp table.ajax.reload()