代码之家  ›  专栏  ›  技术社区  ›  06011991

自定义筛选数据表中的地址和日期范围

datatables filter jquery
  •  1
  • 06011991  · 技术社区  · 6 年前

    我正在尝试使用自定义筛选器筛选数据表 date range , radius 和 location .

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

    日期范围 应该过滤 dates column 从桌子上。 半径 和 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 回复  |  直到 6 年前
        1
  •  1
  •   davidkonrad    6 年前

    onSelect setDefaults 

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


    $("#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/

    推荐文章
    shekharsabale  ·  从列表元素捕获子字符串
    2 年前
    Julien T-Pro  ·  如何在python中删除数组对象中的空列表?
    2 年前
    CodeNoob  ·  使用javascript中具有匹配字符的另一个数组筛选数组
    2 年前
    rickymartino  ·  PowerShell Active Directory-无法在筛选器中为Get-ADUser使用数组值
    2 年前
    Alejandro Ozai  ·  按属性筛选对象数组,使用字符串数组筛选字符串数组
    2 年前
    TheCryptoChad  ·  如何过滤a。python中的json数组,以便每个元素中只显示一个参数?
    2 年前
    BabaZuri  ·  应用筛选器时将csv中的行添加到数组
    2 年前
    TheArtilleryGuy1  ·  R:基于多个列的最高日期对数据框进行子集
    2 年前
    Sab  ·  输入为空时,搜索结果元素未隐藏
    2 年前
    bababababa  ·  多个条件的条件格式
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号