Вам необходимо добавить функцию html()
для элемента таблицы <tbody>
, чтобы переопределить существующие результаты новым:
$.ajax({
url: '/Home/LoadInfo',
type: 'GET',
data: {
'name': search
},
success: function (data) {
alert("success");
$('.table tbody').html(data); // override previous results
},
error: function (jqXhr, textStatus, errorThrown) {
alert(errorThrown);
}
});
Если ответ содержит весь элемент <table>
, вы должны опустить tbody
selector:
$('.table').html(data);
Также вы можете попытаться вернуть PartialView()
, например, return PartialView(userDetails);
вместо всей страницы просмотра, если результаты поиска представлены на той же странице поиска.
Обновление:
Поскольку data
возвращает всю HTML-страницу, текущее действие контроллера должно быть изменено так, чтобы оно возвращало ответ JSON, как в этом примере:
public ActionResult LoadInfo(string name)
{
List<readDetails> userDetails = new List<readDetails>();
string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (MySqlConnection con = new MySqlConnection(constr))
{
string query = "SELECT ID, Name, Address FROM EmpDetails WHERE Name like '%" + name + "%' LIMIT 500";
using (MySqlCommand cmd = new MySqlCommand(query))
{
cmd.Connection = con;
con.Open();
using (MySqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
userDetails.Add(new readDetails
{
op = sdr["ID"].ToString(),
op_desc = sdr["Name"].ToString(),
doc_id = sdr["Address"].ToString(),
});
}
}
con.Close();
}
}
return Json(userDetails, JsonRequestBehavior.AllowGet);
}
Затем замените существующее содержимое <tbody>
данными из ответа:
$.ajax({
url: '/Home/LoadInfo',
type: 'GET',
data: {
'name': search
},
dataType: 'json',
success: function (data) {
alert("success");
var tblbody = $('.table').find('tbody');
tblbody.empty(); // remove existing rows
var row = '';
$.each(data, function(i, item) {
row += $('<tr>').append($('<td>').text(item.ID), $('<td>').text(item.Name), $('<td>').text(item.Address));
tblbody.append(row); // add new rows
});
},
error: function (jqXhr, textStatus, errorThrown) {
alert(errorThrown);
}
});
На этом этапе результаты поиска должны отображаться в той же таблице, а не возвращать весь контент HTML.