个人中心
gpt4 book ai didi

javascript - 使用范围 slider 过滤数据

转载 作者：行者123 更新时间：2023-12-01 01:18:36 25 4
gpt4 key购买 nike

我正在使用 jquery 数据表和 range.slider .

我想使用范围 slider 过滤最后一列。

如您所见，我正在尝试使用 search.push 来过滤数据。

在下面找到我的可行示例:

$(document).ready(function() {

  var lowestPriceRange = $("#ion-range");

  /**
   * Lowest Price Range
   */
  lowestPriceRange.ionRangeSlider({
    type: 'double',
    min: 0,
    max: 100,
    from: 0,
    to: 50
  });

  const table = $('.datatable-responsive').DataTable();

  $('#ion-range').on('change', function() {
    var $inp = $(this);
    var min = parseFloat($inp.data("from")); // input data-from attribute
    var max = parseFloat($inp.data("to")); // input data-to attribute

    let search = [];
    console.log(min, max); // all values

    search.push(
      function(settings, data, dataIndex) {
        var col = parseFloat(data[4]) || 0; // data[number] = column number
        if ((isNaN(min) && isNaN(max)) ||
          (isNaN(min) && col <= max) ||
          (min <= col && isNaN(max)) ||
          (min <= col && col <= max)) {
          return true;
        }
        return false;
      }
    );
    table.column(3).search(search, true, false).draw();
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/components.min.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/colors.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->

  <!-- Core JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/jquery.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->

  <!-- Load plugin -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/tables/datatables/datatables.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/widgets.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/touch.min.js"></script>

  <!-- /load plugin -->

  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>

</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">

    <!-- Default ordering -->
    <div class="card">

      <div class="card-body">
        <fieldset>
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label>Lowest Price Range:</label>
                <div class="mb-1">
                  <input type="text" class="form-control ion-height-helper" id="ion-range" data-fouc>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>

    <div class="card">

      <div class="card-body">

        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Stock</th>
              <th>SYMBOL</th>
              <th>LAST</th>
              <th>CHG %</th>
              <th>CHG</th>
              <th>HIGH</th>
            </tr>
          </thead>
          <tbody>

            <tr role="row" class="odd">
              <td tabindex="0" class="sorting_1">1</td>
              <td>OAX/ETH</td>
              <td>OAX</td>
              <td>0.00061720</td>
              <td>-181.40%</td>
              <td>-0.00001140</td>
              <td>0.00065050</td>
            </tr>
            <tr role="row" class="even">
              <td tabindex="0" class="sorting_1">8</td>
              <td>SYS/BNB</td>
              <td>SYS</td>
              <td>0.00767000</td>
              <td>-166.70%</td>
              <td>-0.00013000</td>
              <td>0.00803000</td>
            </tr>
            <tr role="row" class="odd">
              <td tabindex="0" class="sorting_1">9</td>
              <td>BCN/ETH</td>
              <td>BCN</td>
              <td>0.000000111</td>
              <td>0.00%</td>
              <td>0.00000000</td>
              <td>0.00000000</td>
            </tr>
            <tr role="row" class="even">
              <td tabindex="0" class="sorting_1">10</td>
              <td>BCN/BNB</td>
              <td>BCN</td>
              <td>10.00000000</td>
              <td>0.00%</td>
              <td>0.00000000</td>
              <td>0.00000000</td>
            </tr>
            <tr role="row" class="odd">
              <td class="sorting_1" tabindex="0">11</td>
              <td>ENJ/BNB</td>
              <td>ENJ</td>
              <td>55.00658300</td>
              <td>28.90%</td>
              <td>0.00001900</td>
              <td>0.00707600</td>
            </tr>
            <tr role="row" class="even">
              <td class="sorting_1" tabindex="0">12</td>
              <td>2GIVE/BTC</td>
              <td>2GIVE</td>
              <td>0.00000040</td>
              <td>256.41%</td>
              <td>0.00000001</td>
              <td>0.00000042</td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>
</html>

正如您所看到的，我在过滤数据时捕获了该事件，但我的数据表没有被过滤。

有什么建议我做错了什么吗？

感谢您的回复!

最佳答案

只是显示在哪里放置 Georgy 答案以使上述问题正确运行。

    $(document).ready(function() {

      var lowestPriceRange = $("#ion-range");
 var min=0;
 var max=0;
      /**
       * Lowest Price Range
       */
      lowestPriceRange.ionRangeSlider({
        type: 'double',
        min: 0,
        max: 100,
        from: 0,
        to: 50
      });

      const table = $('.datatable-responsive').DataTable();
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var age = parseFloat( data[5] ) || 0; // use data for the age column

        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
      $('#ion-range').on('change', function() {
        var $inp = $(this);
         min = parseFloat($inp.data("from")); // input data-from attribute
         max = parseFloat($inp.data("to")); // input data-to attribute

        let search = [];
        console.log(min, max); // all values

        search.push(
          function(settings, data, dataIndex) {
            var col = parseFloat(data[4]) || 0; // data[number] = column number
            if ((isNaN(min) && isNaN(max)) ||
              (isNaN(min) && col <= max) ||
              (min <= col && isNaN(max)) ||
              (min <= col && col <= max)) {
              return true;
            }
            return false;
          }
        );
        table.column(3).search(search, true, false).draw();
      });
    });

关于javascript - 使用范围 slider 过滤数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54476767/

25 4 0
文章推荐： javascript - 尝试将 Braintree 嵌套回调转换为 NodeJS 异步/等待语法
文章推荐： javascript - 将 Json 对象数组值转换为单个数组
文章推荐： python - 使用 PyQt5/QtDesigner 弹出窗口或多个窗口
文章推荐： javascript - 我使用 .catch 来捕获 promise 的拒绝，但它说我使用 .catch
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com