实时搜索分页

Question

到目前为止，我已经完成了使用分页创建报告。示例代码 index.php:

<div class='web'>    
    <h1>Data Order Notaris</h1>
        <div id="page_data"></div>
            <span class="flash"></span>
        </div>

并使用脚本：

$(document).ready(function(){
                    change_page('0');
                });
                    function change_page(page_id){
                        $(".flash").show();
                        $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
                        var dataString = 'page_id='+ page_id;
                            $.ajax({
                                type: "POST",
                                url: "paging.php",
                                data: dataString,
                                cache: false,
                                    success: function(result){
                                        $(".flash").hide();
                                        $("#page_data").html(result);
                                    }
                            });
                    }

我的分页文件是paging.php 我在使用实时搜索时遇到的问题。我正在尝试在 index.php

中添加输入类型

添加输入脚本：

<input type='text' name='search' placeholder='search' />

我认为它不需要表单和提交按钮。如何 post 从输入名称='search' 到 paging.php 的值来过滤数据报告？

是否需要更多功能或使用功能change_page？我仍然对逻辑感到困惑。感谢帮助

Answer 1

你应该这样输入：

 <input type='text' Id="search_box" name='search' placeholder='search' />

然后使用js你可以获取这个字段的值

所以你的js代码将是：

$(document).ready(function(){
                    change_page('0');
                });
                    function change_page(page_id){
                        //To get the field value
                        var search_val = $("#search_box").val();
                        $(".flash").show();
                        $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
                        var dataString = 'page_id='+ page_id+'&search='+search_val;
                            $.ajax({
                                type: "POST",
                                url: "paging.php",
                                data: dataString,
                                cache: false,
                                    success: function(result){
                                        $(".flash").hide();
                                        $("#page_data").html(result);
                                    }
                            });
                    }

然后在 paging.php 中进行适当的查询 :)

实时搜索分页

pagination with live search

php

jquery

ajax

livesearch