Question

如何刷新数据表，发送新的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"));
				}
			});
		});
}

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

但是当我刷新页面（数据表被清除）然后执行新的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);
        }
    }

使用新的aaData值重新加载Datatable

1 个答案: