Question

我根据＆＃34; go＆＃34;上的变量值创建了一个用json数据填充的动态html表。按钮单击。第一次填充数据时搜索工作正常，但在运行时更改变量后，当我重新填充＆＃34时的表格时，去＆＃34;按钮单击不同的值，一旦我尝试从表中搜索特定值，它尝试从以前填充的数据搜索，即第一次填充的数据不是从当前填充的数据填充，它也修改表有了这些数据。无论你在＆＃34;变量值的基础上修改表的数据多少次，去＆＃34;按钮单击，虽然表被修改但是一旦您应用于从表中搜索值，它将从表的第一个填充值进行搜索并使用该值修改表。

＆＃13;

	$(document).ready(function() {
		$("#report").hide();
		$("#orderGraph").hide();
		$("#profitGraph").hide();
		$("#go").click(function() {
				$("#orderGraph").show();
				$("#profitGraph").show();
				loadGraphOrderFilter();
				loadGraphProfitFilter();
				$("#report").show();
				$("#datatable > tbody > tr").remove();
			var e;
			multicompanyUseCaseData="";
			orderConditionData="";
			orderTypeData="";
			if(document.getElementById("mcuc_selection"))
			{
				e=document.getElementById("mcuc_selection");
				multicompanyUseCaseData = e.options[e.selectedIndex].text;
			}
			if(document.getElementById("oc_selection"))
			{			
				e = document.getElementById("oc_selection");
				orderConditionData = e.options[e.selectedIndex].text;
			}
			if(document.getElementById("ot_selection"))
			{
				e = document.getElementById("ot_selection");
				orderTypeData = e.options[e.selectedIndex].text;
			}	
			var responseObj = $.parseJSON(response1);

    $.each(responseObj, function (i, item) {
	if( item.useCase == multicompanyUseCaseData || item.orderCondition == orderConditionData || item.orderType == orderTypeData )
	{
        $('<tr>').append(
        $('<td>').text(item.orderId),
        $('<td>').text(item.purchaseId),
        $('<td>').text(item.shipmentId),
        $('<td>').text(item.useCase),
        $('<td>').text(item.orderCondition),
        $('<td>').text(item.orderType)).appendTo('#datatable');
	}
});
          // this line performs the searching operation from the table
        $('#datatable').dataTable();		
  });
	});

＆＃13;

var response1 = '[{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGS", "orderCondition":"2", "orderType":"Customer" }';
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGL", "orderCondition":"2", "orderType":"Customer" }';
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"NAFN", "orderCondition":"2", "orderType":"Customer" }]';

                  <div class="x_content">
                    <table id="datatable" class="table table-striped table-bordered">
                      <thead>
					<tr>
						<th>Order Id</th>
						<th>Shipment Id</th>
						<th>Purchase Id</th>
						<th>Use Case</th>
						<th>Order Condition</th>
						<th>Order Type</th>
					</tr>
						</thead>
                      <tbody>
                      </tbody>
                    </table>
                  </div>

＆＃13;

Answer 1

DataTables在您调用.dataTable()时缓存/索引/存储表中的数据。这意味着如果您使用自己的代码更改表，DataTables插件仍将搜索它已存储的先前数据。您需要使用DataTables API来清除/更新表中的数据，以便插件还清除并更新它已存储的数据以及用于执行搜索的数据。

还有另一个例子已在这里得到解答：

@aschipfl

使用JSON数据从动态创建的表中搜索

1 个答案: