我正在尝试使用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");
}
});
})
}
答案 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/