文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >dataTables中的自定义筛选器地址和日期范围

问dataTables中的自定义筛选器地址和日期范围
EN

Stack Overflow用户
提问于 2018-08-02 10:41:11
回答 1查看 53关注 0票数 1

我正在尝试使用自定义筛选器date range、radius和location来过滤date range。

我需要从应该与输入的radius匹配的表中计算输入位置到每个site列位置之间的半径，然后显示结果。

date range应该从表中过滤dates column。radius和postcode应该从表中过滤site column。

但是我的函数没有得到任何回报，我不知道哪里有错误。

Html代码：

代码语言：javascript
复制
 <table class="transport-search">
  <tbody>
    <tr>
      <td style="padding: 10px !important"><input name="min" id="min" type="text" class="form-control date" placeholder="Min Date"></td>

      <td style="padding: 10px !important"> <input name="max" id="max" type="text" class="form-control date" placeholder="Max Date"></td>

      <td style="padding: 10px !important"> <input type="text" class="form-control" id="radius" placeholder="Radius"></td>

      <td style="padding: 10px !important"> <input type="text" class="form-control" id="postcode" placeholder="Address/Postcode"></td>

    </tr>
  </tbody>
</table>
<table class="table-striped table table-bordered table-condensed transport">
  <thead>
    <tr role="row">
      <th width="4%">JobID</th>
      <th width="8%">Customer</th>
      <th width="11%">Site</th>
      <th width="8%">Site Contact</th>
      <th width="8%">Direction</th>
      <th width="8%">Dates</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN52
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1281 </p>
        <p class="no-margins">BDS Yorkshire Limited</p>
      </td>
      <td>
        <p class="no-margins"> Hilderthorpe Road </p>
        <p class="no-margins"> </p>
        <p class="no-margins"> </p>
        <p class="no-margins">Bridlington </p>
        <p class="no-margins"> East Yorkshire </p>
        <p class="no-margins"> YO15 3AZ </p>
      </td>
      <td>
        <p class="no-margins">Jane Mason </p>
        <p class="no-margins">jaynem@bdsyorkshire.com </p>
        <p class="no-margins">01377 240403 </p>
      </td>
      <td>Collection</td>
      <td>
        02/02/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN52
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1281 </p>
        <p class="no-margins">BDS Yorkshire Limited</p>
      </td>
      <td>
        <p class="no-margins"> Hilderthorpe Road </p>
        <p class="no-margins"> </p>
        <p class="no-margins"> </p>
        <p class="no-margins">Bridlington </p>
        <p class="no-margins"> East Yorkshire </p>
        <p class="no-margins"> YO15 3AZ </p>
      </td>
      <td>
        <p class="no-margins">Jane Mason </p>
        <p class="no-margins">jaynem@bdsyorkshire.com </p>
        <p class="no-margins">01377 240403 </p>
      </td>
      <td>Collection</td>
      <td>
        02/02/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN52
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1281 </p>
        <p class="no-margins">BDS Yorkshire Limited</p>
      </td>
      <td>
        <p class="no-margins"> Hilderthorpe Road </p>
        <p class="no-margins"> </p>
        <p class="no-margins"> </p>
        <p class="no-margins">Bridlington </p>
        <p class="no-margins"> East Yorkshire </p>
        <p class="no-margins"> YO15 3AZ </p>
      </td>
      <td>
        <p class="no-margins">Jane Mason </p>
        <p class="no-margins">jaynem@bdsyorkshire.com </p>
        <p class="no-margins">01377 240403 </p>
      </td>
      <td>Delivery</td>
      <td>
        02/02/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN52
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1281 </p>
        <p class="no-margins">BDS Yorkshire Limited</p>
      </td>
      <td>
        <p class="no-margins"> Hilderthorpe Road </p>
        <p class="no-margins"> </p>
        <p class="no-margins"> </p>
        <p class="no-margins">Bridlington </p>
        <p class="no-margins"> East Yorkshire </p>
        <p class="no-margins"> YO15 3AZ </p>
      </td>
      <td>
        <p class="no-margins">Jane Mason </p>
        <p class="no-margins">jaynem@bdsyorkshire.com </p>
        <p class="no-margins">01377 240403 </p>
      </td>
      <td>Delivery</td>
      <td>
        02/02/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN63</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1249 </p>
        <p class="no-margins">Windser Road Surfacing</p>
      </td>
      <td>
        <p class="no-margins">Etton Road</p>
        <p class="no-margins">Cherry Burton</p>
        <p class="no-margins"></p>
        <p class="no-margins">Beverley</p>
        <p class="no-margins"></p>
        <p class="no-margins">HU17 7RP</p>
      </td>
      <td>
        <p class="no-margins">Gordon Blair</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN63</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1249 </p>
        <p class="no-margins">Windser Road Surfacing</p>
      </td>
      <td>
        <p class="no-margins">Etton Road</p>
        <p class="no-margins">Cherry Burton</p>
        <p class="no-margins"></p>
        <p class="no-margins">Beverley</p>
        <p class="no-margins"></p>
        <p class="no-margins">HU17 7RP</p>
      </td>
      <td>
        <p class="no-margins">Gordon Blair</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
      </td>
      <td>Delivery</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Collection</td>
      <td>
        01/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Collection</td>
      <td>
        01/04/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Collection</td>
      <td>
        01/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Collection</td>
      <td>
        01/04/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Delivery</td>
      <td>
        29/03/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Delivery</td>
      <td>
        29/03/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Delivery</td>
      <td>
        29/03/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> H56</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1177 </p>
        <p class="no-margins">Toppesfield Limited</p>
      </td>
      <td>
        <p class="no-margins">Three Sisters </p>
        <p class="no-margins">Three Sisters Race Track </p>
        <p class="no-margins">Three Sisters Road </p>
        <p class="no-margins">Ashton in Makerfield </p>
        <p class="no-margins">Wigan </p>
        <p class="no-margins">WN4 8DD </p>
      </td>
      <td>
        <p class="no-margins">Craig Germeney </p>
        <p class="no-margins">craig.germeney@toppesfield.com </p>
        <p class="no-margins">07773 257824 </p>
      </td>
      <td>Delivery</td>
      <td>
        29/03/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN62</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1114 </p>
        <p class="no-margins">NMC Surfacing</p>
      </td>
      <td>
        <p class="no-margins">Kimberley Caravans</p>
        <p class="no-margins">Burtree Lane</p>
        <p class="no-margins"></p>
        <p class="no-margins">Darlington</p>
        <p class="no-margins"></p>
        <p class="no-margins">DL2 2XZ</p>
      </td>
      <td>
        <p class="no-margins">Elaine Sheppard</p>
        <p class="no-margins">elaine.sheppard@nmcsurfacing.co.uk</p>
        <p class="no-margins">01302 275131</p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN62</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1114 </p>
        <p class="no-margins">NMC Surfacing</p>
      </td>
      <td>
        <p class="no-margins">Kimberley Caravans</p>
        <p class="no-margins">Burtree Lane</p>
        <p class="no-margins"></p>
        <p class="no-margins">Darlington</p>
        <p class="no-margins"></p>
        <p class="no-margins">DL2 2XZ</p>
      </td>
      <td>
        <p class="no-margins">Elaine Sheppard</p>
        <p class="no-margins">elaine.sheppard@nmcsurfacing.co.uk</p>
        <p class="no-margins">01302 275131</p>
      </td>
      <td>Delivery</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN69</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1094 </p>
        <p class="no-margins">C R MacDonald Ltd</p>
      </td>
      <td>
        <p class="no-margins">Hewell Road</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
        <p class="no-margins">Redditch</p>
        <p class="no-margins"></p>
        <p class="no-margins">B97 6AE</p>
      </td>
      <td>
        <p class="no-margins">Michael Siverns </p>
        <p class="no-margins">michael.siverns@crmacdonald.co.uk </p>
        <p class="no-margins"></p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN69</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1094 </p>
        <p class="no-margins">C R MacDonald Ltd</p>
      </td>
      <td>
        <p class="no-margins">Hewell Road</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
        <p class="no-margins">Redditch</p>
        <p class="no-margins"></p>
        <p class="no-margins">B97 6AE</p>
      </td>
      <td>
        <p class="no-margins">Michael Siverns </p>
        <p class="no-margins">michael.siverns@crmacdonald.co.uk </p>
        <p class="no-margins"></p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN69</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1094 </p>
        <p class="no-margins">C R MacDonald Ltd</p>
      </td>
      <td>
        <p class="no-margins">Hewell Road</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
        <p class="no-margins">Redditch</p>
        <p class="no-margins"></p>
        <p class="no-margins">B97 6AE</p>
      </td>
      <td>
        <p class="no-margins">Michael Siverns </p>
        <p class="no-margins">michael.siverns@crmacdonald.co.uk </p>
        <p class="no-margins"></p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
    <tr role="row" class="even">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN69</p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1094 </p>
        <p class="no-margins">C R MacDonald Ltd</p>
      </td>
      <td>
        <p class="no-margins">Hewell Road</p>
        <p class="no-margins"></p>
        <p class="no-margins"></p>
        <p class="no-margins">Redditch</p>
        <p class="no-margins"></p>
        <p class="no-margins">B97 6AE</p>
      </td>
      <td>
        <p class="no-margins">Michael Siverns </p>
        <p class="no-margins">michael.siverns@crmacdonald.co.uk </p>
        <p class="no-margins"></p>
      </td>
      <td>Collection</td>
      <td>
        27/04/2018
      </td>
    </tr>
  </tbody>
</table>

JS代码：

代码语言：javascript
复制
$(document).ready(function() {

  $('input.date').datepicker({
    format: "dd/mm/yyyy",
    changeMonth: true,
    changeYear: true,
    autoclose: true
  });

  var table = $('.transport').DataTable();


  $("#min").datepicker({
    onSelect: function() {
      table.draw();
    }
  });

  $("#max").datepicker({
    onSelect: function() {
      table.draw();
    }
  });

  $('#min, #max').on('keyup', function() {

    table.draw();

  });

  $('#postcode, #radius').on('keyup', function() {

    table.draw();
  });

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {

    // min and max dates matching
    var dateStart = $('#min').datepicker("getDate");
    var dateEnd = $('#max').datepicker("getDate");
    var evalDate = new Date(data[5]);

    if (evalDate >= dateStart && evalDate <= dateEnd) {
      return true;
    } else {
      return false;
    }

    var source = $("#postcode").val();
    var radius = $("#radius").val();

    table.columns().eq(2).each(function(index) {
      var column = table.column(index);

      var destination = column.data();

      distanceCalc(source, destination).then(calcs => {

        if (radius == calcs) {
          return true;
        } else {
          return false;
        }

      }).catch(err => {
        return false;
      })

    });



  });

});

function distanceCalc(source, destination) {
  return new Promise((resolve, reject) => {
    var values = [];
    var directionsService = new google.maps.DirectionsService();
    //*********DIRECTIONS AND ROUTE**********************//
    var request = {
      origin: source,
      destination: destination,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        // directionsDisplay.setDirections(response);
      }
    });
    //*********DISTANCE AND DURATION**********************//
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
      origins: [source],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false
    }, function(response, status) {
      if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
        var distance = response.rows[0].elements[0].distance.text;

        if (distance) {
          resolve(distance);
        } else {
          reject("Lat&Long required as address does not validate");
        }
      } else {
        reject("Lat&Long required as address does not validate");
      }
    });
  })
}

琴键链接

jquery
filter
datatables
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-02 11:50:30

您正在尝试生成两次datePickers。在我看来，您首先使用一组缺省值初始化，然后尝试重新初始化，以便添加onSelect处理程序。使用setDefaults代替，即

代码语言：javascript
复制
$.datepicker.setDefaults({
  format: "dd/mm/yyyy",
  changeMonth: true,
  changeYear: true,
  autoclose: true
});

现在，datePicker实际上是在

代码语言：javascript
复制
$("#min").datepicker({
  onSelect: function() {
    table.draw();
  }
});

选择新日期时执行table.draw()。

下一个问题是，您正在解析非法日期。您正在尝试使用欧洲的Date()符号表示dd/mm/yyyy。您必须转换为mm/dd/yyyy才能使其工作。此外，您的日期计算没有考虑null日期--如果设置了#min或#max not，您会意外地排除所有行。将代码更改为

代码语言：javascript
复制
var d = data[5].split('/');
var evalDate = new Date(d[1]+'/'+d[0]+'/'+d[2]);

和

代码语言：javascript
复制
var dateStart = $('#min').datepicker("getDate") || new Date();
var dateEnd = $('#max').datepicker("getDate") || new Date();

新型叉子-> http://jsfiddle.net/r84wfyud/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51651581

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档