html 如何使搜索栏在不同的列搜索

mklgxw1f  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(165)

我试图使搜索栏在不同的列中搜索,我有一个属性表,我想在其中搜索不同的数据,如我想搜索价格范围的数据,也想搜索面积范围的数据。我在www.example.com核心mvc中做了这个asp.net。我想使搜索看起来像https://www.zameen.com/
我的检视:

@model IEnumerable<eHouse.Models.RentModel>

 <form>
                    <div class="wrap">
                        <div class="search">
                            <input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
                            <button type="submit" class="searchButton" >
                                <i class="fa fa-search"></i>

                            </button>
                        </div>
                        <div id="filter">
                        <select>
                            <option value="Kanal">Kanal</option>
                            <option value="Marla">Marla</option>
                            <option value="Square Feet">Square Feet</option>
                            <option value="Square Meter">Square Meter</option>
                            <option value="Square Yards">Square Yards</option>
                        </select>
                        <input type="text" placeholder="area" />
                        <input type="text" placeholder="price" />

                    </div>
                    </div>
                    
                </form>

也请告诉我,我如何绑定数据与此显示在这个div。

<div class="property_information" >

           @foreach (var item in Model)
           {
                <div class="home-info">
                    <span id="houseid">
                          
                    </span>
                  
                    <a href="#" class="home-images">
                        <img src="@item.pic1" />
                    </a>
                    <div class="home-data">
                        <div class="home-name">
                            <p>@item.tittle</p>
                        </div>
                       
                        <div class="price">
                            <p>@item.price</p>
                        </div>
                        
                        <div class="features">
                            <span>
                               @item.bedroom
                            </span>
                            <span>
                                 @item.bathroom
                            </span>
                            <span>
                                2
                            </span>
                        </div>
                       
                        <div class="desc">
                            @item.descrip
                        </div>
                        <div class="contact-save">
                            <a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="@item.id" >
                                <i class="fas fa-heart" style=" color: white;"></i>
                            </a>
                        
                            <div class="popup" onclick="myFunction()">
                            <a href="tel:+928754756478" class="phone_number" onclick="call()">
                            </a>
                            </div>
                            <div class="popupmsg" onclick="myFunctionmsg()">
                               <a href="#" class="phone_number open_message" onclick="msg()">
                               </a>
                            </div>
                            <a href="#" class="phone_number" onclick="del(this)" data-id="@item.id">
                                <i class="fas fa-trash-alt"  style=" color: white;"></i>
                            </a>
                        </div>
                    </div>
                </div>
            }
    </div>

我的控制器:

public IActionResult Rent(int PageNumber = 1)
{
    var data = rdb.GetDataHouse();
    var datas = rdb.GetDataHouse();
          
    ViewBag.Data = datas.ToList().Take(6);
          
    ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);

    data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();

    return View(data);
}
goqiplq2

goqiplq21#

尝试使用表并导入jquery数据表库

<table id="table">
        <thead>
            <tr>
                <th>col 1</th>
                <th>col 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('#table').DataTable({
            processing: true,
            serverSide: true,
            ...rest
        })
    </script>

相关问题