使用新的 aaData 值重新加载数据表

Question

如何刷新Datatable，发送新的Json数据时

---

POST 请求接收数据，将其发送到 LoadTable 函数以填充数据表。

function initializeTable(){
	$("#submitbutton").on(
		'click',
		function(){
			$.ajax({
				type : 'POST',
				url : 'rest/log/events',
				data : {
					fromTime : $("#fromTime-filter").val(),
					toTime : $("#toTime-filter").val(),
					Text : $("#search-filter-input").val()	
				},
				
				success : function(data) {
					loadTable(data);
				},
				error : function(jqXHR, textStatus, errorThrown) {
					showAjaxError(jqXHR, textStatus, errorThrown,
						$("#error-msg"));
				}
			});
		});
}

---

'data' 被传递给 Load 函数，该函数在 第一次时正确将数据加载到表中。 当我第二次提交 POST 请求时，我在浏览器控制台中看到了新的“数据”，但数据表 not refreshed。

但是当我刷新页面（清除数据表）然后执行新的 POST 时，新数据会正常加载。我希望无需刷新页面即可加载新数据。

function loadTable(data)
{
	$('#report-table').dataTable( {
		bProcessing : true,
		bJQueryUI : true,
		bLengthChange : false,
		bDestory : true,
		bRetrieve : true,
		bStateSave : true,
		oTableTools: {
			sRowSelect: "multi",
			aButtons: [ "select_all", "select_none" ]
		},
		iDisplayLength : 20,
		"aaData": data,
		"aoColumns": [
			{ "mData" : "date" 	},
			{ "mData" : "name" 		},
			{ "mData" : "type" 			},
			{ "mData" : "section" 		}
		]
	} );
}

Answer 1

在我看来，您使用的是 DataTables v1.9。以下是我的做法：

function loadTable(data)
{
    var table = $('#report-table');
    if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
    table.dataTable( {
        bProcessing : true,
        bJQueryUI : true,
        bLengthChange : false,
        bDestory : true,
        bRetrieve : true,
        bStateSave : true,
        oTableTools: {
            sRowSelect: "multi",
            aButtons: [ "select_all", "select_none" ]
        },
        iDisplayLength : 20,
        "aaData": data,
        "aoColumns": [
            { "mData" : "date"  },
            { "mData" : "name"      },
            { "mData" : "type"          },
            { "mData" : "section"       }
        ]
    } );
    } else {
      table.dataTable().fnUpdate(data);
    }
}

另一种选择：

    function loadTable(data)
    {
        var table = $('#report-table');
        if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
        table.dataTable( {
            bProcessing : true,
            bJQueryUI : true,
            bLengthChange : false,
            bDestory : true,
            bRetrieve : true,
            bStateSave : true,
            oTableTools: {
                sRowSelect: "multi",
                aButtons: [ "select_all", "select_none" ]
            },
            iDisplayLength : 20,
            "aaData": data,
            "aoColumns": [
                { "mData" : "date"  },
                { "mData" : "name"      },
                { "mData" : "type"          },
                { "mData" : "section"       }
            ]
        } );
        } else {
          table.dataTable().fnDestroy();
          loadTable(data);
        }
    }