Таблицы данных, созданные с помощью данных AJAX, становятся пустыми при поиске по ключевому слову или изменении количества записей на странице.

Question

Я работаю с таблицами данных Jquery и добавляю строки через функцию успешного вызова ajax.Это работает нормально, но когда я пытаюсь отфильтровать данные с помощью поиска по типу ввода, таблица становится пустой.Также, когда я пытаюсь изменить количество страниц, выпадающих из таблицы, таблица становится пустой.Ниже приведены снимки экрана с таблицей.

Таблица фотографий с данными

Таблица фото с ошибкой

Это мой код Ajax

$.ajax
		({
			type:'POST',
			url:'MyFunction',
			data:{'Id':Id},
			dataType:'json',
			success:function(data)
			{
				var dataString=JSON.stringify(data);
				var dataArray=Array();
				dataArray=dataString.split('},');
				for(var i=0;i<dataArray.length;i++)
				{
					var Array0=dataArray[i].split(',');
					var date0=Array0[2];
					var date1=date0.replace('"Purchase_date":"','');
					var date2=date1.replace('"','');
					
					var product0=Array0[15];
					var product1=product0.replace('"Product_name":"','');
					var product2=product1.replace('"','');
					
					
					var amount0=Array0[3];
					var amount1=amount0.replace('"Purchase_amount":"','');
					var amount2=amount1.replace('"','');
					
					var payed0=Array0[5];
					var payed1=payed0.replace('"Purchase_payed":"','');
					var payed2=payed1.replace('"','');
					
					var balance0=Array0[6];
					var balance1=balance0.replace('"Purchase_balance":"','');
					var balance2=balance1.replace('"','');
					
					var htm='';
					htm+='	<tr class="odd gradeX">';
					htm+='		<td>';
					htm+=			date2;
					htm+='		</td>';
					htm+='		<td>';
					htm+=			product2;
					htm+='		</td>';
					htm+='		<td>';
					htm+=			amount2;
					htm+='		</td>';
					htm+='		<td>';
					htm+=			payed2;
					htm+='		</td>';
					htm+='		<td>';
					htm+=			balance2;
					htm+='		</td>';
					htm+='	</tr>';
					
					$("#MyTable tbody").append(htm);
				}
			}
		});

Где я не прав.

Answer 1

Привет, лучший способ добавить новую строку в datatable add через объект данных, а не напрямую через элемент таблицы, когда вы добавляете новую строку в таблицу без datatable объекта, который вы разбиваете, проверьте этот пример

var t = $('#example').DataTable();
t.row.add([date2,product2,amount2,payed2,balance2]);

https://datatables.net/examples/api/add_row.html