Question

我想在我的项目中使用基于实现价格的滑块，但我不知道如何实现。所以，任何人都可以帮助我。我希望看起来像这样（但它应该在PHP中）：

http://www.aspsnippets.com/Demos/772/ http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx

Answer 1

在这里，我举一个例子让你开始，我正在使用Jquery UI作为范围滑块：

考虑使用此 HTML 元素来渲染滑块范围

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

Js 代码：

$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
    // first range input(min)
    var firstValue = ui.values[0];
    // second range input(max)
    var secondValue = ui.values[1];
    $("#amount").val("$" + firstValue + " - $" + secondValue);
    // here you need to get data from database
    // request to php page with database queries for processing
    $.ajax({
        type: 'POST',
        url: 'phpProcess.php', // create this file with php+mysql(any db)
        data: {
            first: firstValue, // send this paramter
            second: secondValue // send this parameter
        },
        dataType : 'json',
        success: function (data) { // on success request
            // remember we use echo json_encode($data); in php page
            // those data supposed to be available here
            // try console.log(data) to view data
            // on success, populate data into any type of HTML element
            // either li, table, etc... something like this

        }
    });
 }
});

// initial code to display values
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));

PHP 页面

// retrieve data from ajax request
$first = $_POST['first'];
$second = $_POST['second'];
// this is just an example to select data between min and max
$getData = mysqli_query($con, "SELECT *FROM products WHERE price BETWEEN '$first' AND '$second'");
$data = mysqli_fetch_array($getData);
// this output will available on success ajax callback
echo json_encode($data);

DEMO - 没有为ajax请求添加（使用jQuery UI）

DEMO 1 - 使用ion.rangeSlider。

使用ajax在php中过滤基于价格的滑块显示数据库中的产品

1 个答案: