效果如下:

一、在前台页面定义输入搜索条件的文本框

 <div class="ibox-tools">
<span>年度</span>
@Html.DropDownList("year", (List<SelectListItem>)ViewBag.YearDrop, new { @class = "" })
<span>月度</span>
@Html.DropDownList("month", (List<SelectListItem>)ViewBag.MonthDrop, new { @class = "" })
<span>开始日期</span>
@Html.TextBox("StartTime", null, new { @class = "m-wrap small" })
<span>结束日期</span>
@Html.TextBox("EndTime", null, new { @class = "m-wrap small" }) <span>发文类型</span>
@Html.DropDownList("DTMName", null, new { @class = "m-wrap small" })
<span>关键字</span>
@Html.TextBox("KeyWords", null, new { @class = "m-wrap small" }) <a class="btn btn-primary btn-sm" title='搜索' id="btn_search" href="javascript:void(0)"><i class="fa fa-search"></i>搜索</a>
<a class="btn btn-primary btn-sm" title='发文' href="@Url.Action("Create")"><i class="fa fa-plus"></i>添加</a> <a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>

二、最主要的是js部分

  //把公共的设置项都放在这里,就不需要每个页面都设置一遍了,放在jQuery对象上是为了避免污染全局变量
$.dataTablesSettings = {
"aLengthMenu": [10, 25, 50, 100],
"bAutoWidth": false,
"bDeferRender": true,
"bLengthChange": true,
"sAjaxSource": "/ReceivedDoc/AjaxHandler",
"bPaginate": true,
"bServerSide": true,
"bSort": true,
"iDisplayLength": 10,
searching: false,//是否显示搜索框
"aaSorting": [[0, "asc"]], // set first column as a default sort by asc
"bFilter": true,
"aoColumnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'bSortable': true,
'aTargets': [0, 8]
}],
"fnServerParams": function (aoData) {
aoData._rand = Math.random();
},
"fnDrawCallback": function () { } dataTable = $(".dataTables-example").dataTable($.dataTablesSettings);
$('#btn_search').click(function () {
//这里重新设置参数
$.dataTablesSettings.fnServerParams = function (aoData) {
aoData._rand = Math.random();
aoData.push(
{ "name": "year", "value": $('#year').val() },
{ "name": "month", "value": $('#month').val() },
{ "name": "StartTime", "value": $('#StartTime').val() },
{ "name": "EndTime", "value": $('#EndTime').val() },
{ "name": "DTMName", "value": $('#DTMName').val() },
{ "name": "KeyWords", "value": $('#KeyWords').val() }
);
}
//搜索就是设置参数,然后销毁datatable重新再建一个
dataTable.fnDestroy(false);
dataTable = $(".dataTables-example").dataTable($.dataTablesSettings);
//搜索后跳转到第一页
dataTable.fnPageChange(0);
});

三、后台就就可以使用类接收参数了,也可以使用HttpContext.Request.QueryString["year"]接收。接收后根据不同的查询条件进行相应的查询。

最新文章

  1. jQuery所支持的css样式
  2. AngularJS之Provider, Value, Constant, Service, Factory, Decorator的区别与详解
  3. [Android] adb shell dumpsys的使用
  4. Android -- java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack trace available
  5. 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具
  6. BZOJ 3809 莫队+(分块|BIT)
  7. (旧)子数涵数&#183;DW——图文混排页面
  8. Win7 系统引导盘(C盘)空间越来越小怎么办?
  9. maven 解决 Eclipse is running in a JRE, but a JDK is
  10. 利用Splatting提交参数(Hash,哈希)
  11. leetcode第32题--Search in Rotated Sorted Array
  12. Java过滤敏感词语/词汇---DFA算法
  13. D - Zhenya moves from the dormitory URAL - 2015
  14. python3 第十八章 - 迭代器与生成器
  15. python正则表达式--match search方法
  16. Flask 系列之 FlaskForm
  17. [转] 浅析JavaScript设计模式——发布-订阅/观察者模式
  18. 潭州课堂25班:Ph201805201 django框架 第七课 常用 字段类型及参数,关系表的实现,表关系对象add,create的方法 (课堂笔记)
  19. SpringCloud与Consul集成实现负载均衡
  20. JAVA中Integer类型变量比较问题

热门文章

  1. Android常用传感器用法一览(3)
  2. 【转】C++ 虚函数&amp;纯虚函数&amp;抽象类&amp;接口&amp;虚基类
  3. MyBatis SpringBoot2.0 数据库读写分离
  4. vue打包后出现一些map文件的解决方法
  5. pip换国内源
  6. jBoss修改端口号
  7. kettle--组件(3)--行转列
  8. 不懂Git,别说自己是程序猿–20分钟git快速上手(转)
  9. Zip 压缩问题件,获取真实扩展名
  10. Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2013 SSIS