Question

以下是fiddle

当任何日期为空时，不显示任何数据。

$.fn.dataTableExt.afnFiltering.push(
              function (oSettings, aData, iDataIndex) {

                  var today = new Date();
                  var dd = today.getDate();
                  var mm = today.getMonth() + 1;
                  var yyyy = today.getFullYear();

                  if (dd < 10)
                      dd = '0' + dd;

                  if (mm < 10)
                      mm = '0' + mm;

                  today = dd + '/' + mm + '/' + yyyy;

                  if ($('#min').val() !== '' || $('#max').val() !== '') {
                      var iMin_temp = $('#min').val();
                      if (iMin_temp === '') {
                          iMin_temp = '01/01/2009';
                      }

                      var iMax_temp = $('#max').val();
                      if (iMax_temp === '') {
                          iMax_temp = '01/03/2012';
                      }

                      var arr_min = iMin_temp.split("/");
                      var arr_max = iMax_temp.split("/");
                      var arr_date = aData[4].split("/");

                      var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0);
                      var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0);
                      var iDate = new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0);

                      if (iMin === "" && iMax === "") {
                          return true;
                      }
                      else if (iMin === "" && iDate < iMax) {
                          return true;
                      }
                      else if (iMin <= iDate && "" === iMax) {
                          return true;
                      }
                      else if (iMin <= iDate && iDate <= iMax) {
                          return true;
                      }
                      return false;
                  }
              }
          );

$(document).ready(function () {

    // Event listener to the two range filtering inputs to redraw on input
    var data = [
        ["Capture IronMan", null],
        ["Capture Captain America", "12/12/2015"],
        ["Capture Sentry", "1/1/2001"],
        ["Capture Hulk", "2/2/2012"],
        ["Capture Nightcrawler", null],
    ]


    var table = $('#activeProjects').dataTable({
        "processing": true,
        "serverSide": false,
        "bPaginate": true,
        "data": data,
        "aoColumnDefs": [
            {
                "aTargets": [1],
                "mRender": function(data) {
                    return '<a href="ExistingProject?jobNumber=' + data + '">' + data + '</a>';
                }
            }
        ],

        "sPaginationType": "full_numbers"

    });

    $('#clear').click(function () {
        location.reload();
    });

    $('#min, #max').keyup(function () {
        table.api().draw();
    });

    $('#mindate').change( function() { table.api().draw(); } );
    $('#maxdate').change( function() { table.api().draw(); } );


});

<div class="col-lg-12">
    <table class="table display" id="activeProjects">
        <thead>
            <tr>
                <th></th>
                <th><span style="white-space: nowrap;">From: <input type="text" id="mindate" name="mindate" class="form-control numberFilter datepicker" /> To: <input class="form-control numberFilter datepicker" type="text" id="maxdate" name="maxdate" /></span></th>

            </tr>
            <tr>
                <th>Project Name</th>
                <th>Completion Date</th>
           </tr>


        </thead>

        <tbody>
            <tr>

                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Project Name</th>
                <th>Completion Date</th>
            </tr>

        </tfoot>
    </table>
    <button class="btn btn-danger" id="clear">Clear Filters</button>
</div>

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */


/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {

    height: 40px; /* .push must be the same height as .footer */
}

tfoot {
    display: table-header-group;
}


.numberFilter {
    width: 75px;
    white-space: nowrap;
    display:inline-block;
}

我在数据中有很多不完整项目的空日期。即使日期为空，如何强制表加载数据？

注意页面加载并正常工作，没有日期过滤器，但我也需要日期过滤器。

Answer 1

<强>解

您可以将此行添加为过滤功能的第一行，以始终显示无效日期的条目。

// Show entries with no valid date with no filtering applied
if(!/\d{1,2}\/\d{1,2}\/\d{4}/.test(aData[1])){ return true; }

<强>样本

请参阅this jsFiddle以获取代码和演示。

备注

您可能需要重新考虑如何进行过滤。您正在重新过滤change事件，该事件仅在用户离开输入时触发。这看起来很混乱。此外，您还没有在过滤功能中执行日期验证。

也许你应该使用类似于yadcf plug-in的日期选择器，甚至是yadcf plug-in ...

如果日期为空，数据不会显示？

1 个答案: