数据表中的自定义过滤器地址和日期范围

时间：2018-08-02 10:41:11

标签： jquery filter datatables

我正在尝试使用date range，radius和location等自定义过滤器来过滤dataTable。

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

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

但是我的函数没有返回任何结果，我没有弄错哪里。

HTML代码：

 <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代码：

$(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");
      }
    });
  })
}

jsfiddle link的链接

1 个答案:

答案 0 :(得分：1)

您尝试两次生成datePickers。在我看来，您首先要使用一组特定的默认值进行初始化，然后尝试重新初始化以添加onSelect处理程序。请改用setDefaults，即

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

现在datePicker实际上已初始化

$("#min").datepicker({
  onSelect: function() {
    table.draw();
  }
});
选择新日期时，执行

和table.draw()。

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

var d = data[5].split('/');
var evalDate = new Date(d[1]+'/'+d[0]+'/'+d[2]);

和

var dateStart = $('#min').datepicker("getDate") || new Date();
var dateEnd = $('#max').datepicker("getDate") || new Date();

新叉小提琴-> http://jsfiddle.net/r84wfyud/

相关问题
最新问题