jQuery DataTables新增自定義多個搜尋條件

效果如下：

一、在前臺頁面定義輸入搜尋條件的文字框

 <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"]接收。接收後根據不同的查詢條件進行相應的查詢。