如何在不调用MVC中的DB的情况下实现跨页面的搜索？
如何在不调用MVC中的DB的情况下实现跨页面的搜索？
提问于 2018-07-26 00:23:41
我有一个搜索功能，可以很好地工作，但只适用于第一页。我已经在我的应用程序中实现了分页概念。下面是我的搜索函数：
function Search() {
var se = $('#SearchGrid').val().toUpperCase();
var i, td;
debugger;
var x = document.getElementById("VolunteerGrid");
var tr = x.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(se) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}我希望这个搜索函数获得所有行，而不仅仅是第一页上的行，并显示结果。
这是我的简单观点：
<div id="VolunteerGrid">
<table class="table">
<tr>
<th>
Name
</th>
<th>
Email
</th>
<th>
Phone Number
</th>
<th></th>
</tr>
@foreach (var volunteer in Model)
{
//var id = volunteer.VolunteerId;
<tr>
<td>
@Html.DisplayFor(modelItem => volunteer.Name)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.EmailAddress)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.PhoneNumber)
</td>
<td>
<a href="javascript:void(0)" id="Edit_btn" onclick ="EditVolunteer()">Edit</a> | <a href="#" id="Delete_btn">Delete</a>
</td>
</tr>
}
</table>
@Html.PagedListPager(Model, page => Url.Action("LoadVolunteers", new{page }))
我不想做一个DB调用来搜索表。I do to make DB call to search my table。我知道我能做到。请看下面的快照
在第二页(这里没有显示)上，有一个人的名字中有字母“E”。当我搜索时，它没有显示该人的详细信息。它只获取第一页中的行。
在不使用调用数据库的情况下，如何根据搜索输入返回所有人员，？谢谢。
在Rohits建议之后编辑的仍然不能工作
@using System.Web.UI.WebControls
@using VMS.Controllers
@using VMS.Models
@using System.Web.Optimization
@using DocumentFormat.OpenXml.Office.CustomUI
@using MvcPaging
@using Alignment = DocumentFormat.OpenXml.Math.Alignment
@using PagedList.Mvc;
@using PagedList;
@model PagedList.IPagedList<VMS.Models.VolunteerInfo>
@{
ViewBag.Title = "LoadVolunteer";
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<h2>
Registered Volunteers
<button type="button" class="btn btn-group-sm btn-success pull-right" id="Excel_Btn">Export to Excel</button>
<img src="~/Images/search.png" width="20px" height="5px" style="position: fixed; margin: 0.4pc 0px 0pc 3.8pc; height: 4%;"/> <input type="text" id="SearchGrid" onkeyup="Search()" class="col-md-offset-1 customChanges" placeholder="Search for volunteer"/>
</h2>
<div id="VolunteerGrid">
<table class="table" id="tblVolunteer">
<tr>
<th>
Name
</th>
<th>
Email
</th>
<th>
Phone Number
</th>
<th></th>
</tr>
@foreach (var volunteer in Model)
{
//var id = volunteer.VolunteerId;
<tr>
<td>
@Html.DisplayFor(modelItem => volunteer.Name)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.EmailAddress)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.PhoneNumber)
</td>
<td>
<a href="javascript:void(0)" id="Edit_btn" onclick="EditVolunteer()">Edit</a> | <a href="#" id="Delete_btn">Delete</a>
</td>
</tr>
}
</table>
@Html.PagedListPager(Model, page => Url.Action("LoadVolunteers", new {page}))
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Excel_Btn').on('click',
function() {
$.ajax({
url: '@Url.Action("ExportToExcel", "ViewEditVolunteer")'
});
});
$('#tblVolunteer').dataTable({
"ajax": {
"url": '/ViewEditVolunteerController/LoadVolunteers',
"type": "GET",
"dataType": 'json',
"data": model
},
oLanguage: { "sZeroRecords": "No Records Found" },
bDestroy: true,
bFilter: false,
bInfo: true,
aaSorting: [],
bLengthChange: false,
columns: [
{ "sTitle": "Name", "data": "name" },
{ "sTitle": "Email", "data": "Email" },
{ "sTitle": "Phone No", "data": "phone" },
{ "sTitle": "Action", "data": "" }
],
"fnRowCallback": function(nRow, aaData) {
$("td:eq(4)", nRow).html("<a onClick='EditVolunteerInfo(" +
aaData.VolunteerId +
")'>Edit</a> | <a onClick='DeleteVolunteerInfo(" +
aaData.VolunteerId +
")'>Delete</a>");
}
});
});
function Search() {
var se = $('#SearchGrid').val().toUpperCase();
var i, td;
var x = document.getElementById("VolunteerGrid");
var tr = x.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(se) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>回答 4
Stack Overflow用户
回答已采纳
发布于 2018-07-27 21:49:20
跟上Rohits的答案
在你的原始表上，只需要调用这个$('#YourTableID').dataTable();就可以解决你的问题了。
请确保您包含
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>Stack Overflow用户
发布于 2018-07-27 18:16:34
@using System.Web.UI.WebControls
@using VMS.Controllers
@using VMS.Models
@using System.Web.Optimization
@using DocumentFormat.OpenXml.Office.CustomUI
@using MvcPaging
@using Alignment = DocumentFormat.OpenXml.Math.Alignment
@using PagedList.Mvc;
@using PagedList;
@model PagedList.IPagedList<VMS.Models.VolunteerInfo>
@{
ViewBag.Title = "LoadVolunteer";
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<h2> Registered Volunteers </h2>
<button type="button" class="btn btn-group-sm btn-success pull-right" id="Excel_Btn">Export to Excel</button>
<div id="VolunteerGrid">
<table id="tblVolunteer"></table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Excel_Btn').on('click',
function() {
$.ajax({
url: '@Url.Action("ExportToExcel", "ViewEditVolunteer")'
});
});
$('#tblVolunteer').dataTable({
"ajax": {
"url": '/ViewEditVolunteerController/LoadVolunteers',
"type": "GET",
"dataType": 'json',
"data": model
},
oLanguage: { "sZeroRecords": "No Records Found" },
bDestroy: true,
bFilter: false,
bInfo: true,
aaSorting: [],
bLengthChange: false,
columns: [
{ "sTitle": "Name", "data": "name" },
{ "sTitle": "Email", "data": "email" },
{ "sTitle": "Phone No", "data": "phone" },
{ "sTitle": "Action", "data": "options" }
],
"fnRowCallback": function(nRow, aaData) {
$("td:eq(4)", nRow).html("<a onClick='EditVolunteerInfo(" +
aaData.VolunteerId +
")'>Edit</a> | <a onClick='DeleteVolunteerInfo(" +
aaData.VolunteerId +
")'>Delete</a>");
}
});
});
</script>请注意:在上面的datatable列中，"sTitle“表示表头，"data”只是映射到datatable中的JSON响应对象的映射。
ViewEditVolunteerController.cs
public JsonResult LoadVolunteers()
{
List<Volunteers> listVol = new List<Volunteers>();
//this is just one object for your understanding purpose, you may call service here to read the data from database
var result= listVol.Add(new Volunteer
{
name="XYZ",
email="xyz@hotmail.com",
phone="0000000454",
options=""
});
return Json(result, JsonRequestBehavior.AllowGet);
} Stack Overflow用户
发布于 2018-07-26 00:33:51
使用jQuery DataTable插件，而不是上面所做的，它是开源的，实现起来更灵活，可以处理大量的记录。
有关更多信息，请参阅：https://datatables.net/。
在DOM中进行ajax调用并绑定json响应，如下所示：
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: ''
},
columns: [ ... ]
} );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51523620
复制相关文章
相似问题