Jquery DataTable日期过滤器无法在客户端工作

时间:2015-06-13 10:44:23

标签: datatables

我在我的MVC应用程序中使用Jquery DataTable。我想使用Date-Range过滤DataTable中的数据。当页面加载时,我从DB获取所有数据。所以我需要在客户端的DataTable的一列中实现这个日期范围过滤器。我尝试了以下编码,但日期没有过滤。

HTML表:

<table border="0" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td>From Date:</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>To Date:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody>
</table>

<table id="Billing">
    <thead>
        <tr>
            <th>Select</th>
            <th>Company Name</th> 
            <th>Amount</th>
            <th>Invoice Date</th>
            <th>Status</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td><input type="checkbox" value=@item.companyId /></td>
                <td> @item.CompanyName </td> 
                <td> @item.TotalAmount </td>
                <td> @item.InvoiceDate </td>
                <td> @item.Status </td>
                <td> @item.Notes </td>
            </tr>
        }
    </tbody>
</table>

jquery DataTable Initialize:

<script>

$(document).ready(function () {

    $("#min").datepicker();
    $("#max").datepicker();

    var table = $('#Billing').dataTable(
        {
            "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
            "iDisplayLength": 10
        }).columnFilter({
            sPlaceHolder: "head",
            aoColumns: [null, null, null, { "type": "date-range" }, null, null]

        });

    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup(function () {
        table.draw();
    });
});

$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
    var dateMin = $('#min').attr("value");
    var dateMax = $('#max').attr("value");

    dateMin = dateMin.substring(0, 4) + dateRange.substring(5, 7) + dateRange.substring(8, 10);
    dateMax = dateMax.substring(13, 17) + dateRange.substring(18, 20) + dateRange.substring(21, 23);

    var date = aData[3];

    // remove the time stamp out of my date
    // 2010-04-11 20:48:22 -> 2010-04-11
    date = date.substring(0, 10);
    // remove the "-" characters
    // 2010-04-11 -> 20100411
    date = date.substring(0, 4) + date.substring(5, 7) + date.substring(8, 10)

    // run through cases
    if (dateMin == "" && date <= dateMax) {
        return true;
    }
    else if (dateMin == "" && date <= dateMax) {
        return true;
    }
    else if (dateMin <= date && "" == dateMax) {
        return true;
    }
    else if (dateMin <= date && date <= dateMax) {
        return true;
    }
    // all failed
    return false;
}
);

</script>

0 个答案:

没有答案