pagination with live search

Question

So far, i have done creating report with paging. sample code index.php:

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

and use script:

$(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);
                                    }
                            });
                    }

my file for show paging is paging.php my problem when using live search. i am trying add input type in index.php

add input script:

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

i think it doesn't need form and submit button. how to post value from input name='search' to paging.php for filter data report?

is it need more function or using function change_page? i am still confuse with logic. thanks for help

Answer 1

You should give Input in this way:

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

Then using js you can fetch this field's value

So your js code will be as:

$(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);
                                    }
                            });
                    }

Then make the appropriate query in your paging.php :)