效果图
初始数据,按时间排序+默认两条数据分页
下拉框名称查询后
时间查询
时间查询后
数据模型类TestModel:
public class TestModel
{
[DisplayName("id")]
public int id { get; set; }
[DisplayName("数据名")]
public string name { get; set; }
[DisplayName("测试日期")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime testData { get; set; }
}
[DisplayFormat(DataFormatString = “{0:yyyy-MM-dd}”)] 即为设置时间默认的显示格式
准备工作:添加分页包
在NuGet中添加:PagedList.MVC
视图代码:
@model PagedList.IPagedList<DSG_Analyse.Models.TestModel>
@using PagedList.Mvc;
@{
ViewBag.Title = "DrowList";
}
<style>
tr td, th {
border: 3px solid black;
text-align: center;
width: 300px;
height: 50px;
}
.mt {
border-collapse: collapse;
}
</style>
@using (Html.BeginForm("DrowList", "Test", FormMethod.Get)) //不需要通过post形式发送数据
{
<p>
<h2>数据查询</h2>
时间一
<input type="text" name="datetime1" id="datetime" value=@ViewBag.datetime1>
时间二
<input type="text" name="datetime2" id="datetime2" value=@ViewBag.datetime2>
数据名
@Html.DropDownList("select_status", ViewData["status"] as List<SelectListItem>, "请选择")
<input type="submit" value="搜索" style="width:80px" />
<script src="~/Content/laydate/laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
elem: '#datetime' //指定元素
});</script>
<script src="~/Content/laydate/laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
elem: '#datetime2' //指定元素
});</script>
</p>
}
<table class="mt">
<tr>
<th>
ID
</th>
<th>
数据名称
</th>
<th>
时间
</th>
</tr>
@foreach (var item in Model)
{
<tr align="center">
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.testData)
</td>
</tr>
}
</table>
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("DrowList",
new { page, datetime1 = ViewBag.datetime1, datetime2 = ViewBag.datetime2, Select = Request["select_status"] }))
控制器代码:
先需要 using PagedList;
public ActionResult DrowList(string Select, string datetime1, string datetime2, int? page)
{
//获取下拉框的值
Select = Request["select_status"];
//给下拉框绑定
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem() { Text = "数据一", Value = "数据一" });
list.Add(new SelectListItem() { Text = "数据二", Value = "数据二" });
list.Add(new SelectListItem() { Text = "数据三", Value = "数据三" });
list.Add(new SelectListItem() { Text = "数据四", Value = "数据四" });
ViewData["status"] = list;
//设置
ViewData["select_status"] = Select;
//准备数据
List<Models.TestModel> TestModel = new List<Models.TestModel>();
TestModel.Add(new Models.TestModel() { id = 1, name = "数据一", testData = DateTime.Now });
TestModel.Add(new Models.TestModel() { id = 2, name = "数据二", testData = DateTime.Now.AddDays(-1) });
TestModel.Add(new Models.TestModel() { id = 3, name = "数据三", testData = DateTime.Now.AddDays(1) });
TestModel.Add(new Models.TestModel() { id = 4, name = "数据四", testData = DateTime.Now.AddDays(-2) });
//下拉框选择
if (!string.IsNullOrWhiteSpace(Select))
{
TestModel = TestModel.FindAll(t => t.name.Contains(Select));
}
//时间查询
if (!string.IsNullOrWhiteSpace(datetime1) && !string.IsNullOrWhiteSpace(datetime2))
{
int time1 = Convert.ToInt32(datetime1.Replace("-", ""));
int time2 = Convert.ToInt32(datetime2.Replace("-", ""));
int Max = Math.Max(time1, time2);
int Min = Math.Min(time1, time2);
//记录选择的时间
ViewBag.datetime1 = datetime1;
ViewBag.datetime2 = datetime2;
TestModel = TestModel.FindAll(t => Confirm(Convert.ToInt32(t.testData.ToString("yyyy-MM-dd").Replace("-", "")), Max, Min));
}
//数据根据时间进行排序
var result = from d in TestModel
orderby d.testData descending
select d;
int pageSize = 2;
int pageNumber = (page ?? 1);
return View(result.ToPagedList(pageNumber, pageSize));
}
时间选择时需要的js和css下载地址。
链接:https://pan.baidu.com/s/15_C4CgPb56ueC6nr-ftuZQ
提取码:9c2b