webslesson search bar ajax

Solutions on MaxInterview for webslesson search bar ajax by the best coders in the world

showing results for - "webslesson search bar ajax"
25 Apr 2018
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>Live Data Search with Pagination in PHP using Ajax</title>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
9  </head>
10  <body>
11    <br />
12    <div class="container">
13      <h3 align="center">Live Data Search with Pagination in PHP Mysql using Ajax</h3>
14      <br />
15      <div class="card">
16        <div class="card-header">Dynamic Data</div>
17        <div class="card-body">
18          <div class="form-group">
19            <input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
20          </div>
21          <div class="table-responsive" id="dynamic_content">
22            
23          </div>
24        </div>
25      </div>
26    </div>
27  </body>
28</html>
29<script>
30  $(document).ready(function(){
31
32    load_data(1);
33
34    function load_data(page, query = '')
35    {
36      $.ajax({
37        url:"fetch.php",
38        method:"POST",
39        data:{page:page, query:query},
40        success:function(data)
41        {
42          $('#dynamic_content').html(data);
43        }
44      });
45    }
46
47    $(document).on('click', '.page-link', function(){
48      var page = $(this).data('page_number');
49      var query = $('#search_box').val();
50      load_data(page, query);
51    });
52
53    $('#search_box').keyup(function(){
54      var query = $('#search_box').val();
55      load_data(1, query);
56    });
57
58  });
59</script>
60
61
source