0

I am trying to implement ajax pagination. but ajax pagination is loading perfectly when I am clicking on the second page button. but when I am clicking on the third-page button it's reloading the whole page.

Here is the search function

public function search(Request $request){
$query = $request->get('query');
if($request->ajax()){   
            $data = Constant_model::get_icons('fontawesomeicons',"id",'DESC',10,$query);
                    }
    return view('icons_table_data', compact('data'))->render();


    }

}

and the javascript code is 

function load_data(query,page) {
  $.ajax({
    url: "/icons/search?page="+page,
    method: "GET",
    data: {
      search: query
    },
    error: function (error) {

        console.log(error);

    },
    success: function(data) {


        $('#tabledata').empty();
        $('#tabledata').append(data);
    }
  });
}


$(document).ready(function() {

$('#search').keyup(function() {
  var search = $(this).val();
  var page = $('#hidden_page').val();
  if (search != '') {

   load_data(search,page);

  } else {

  }
});
});

 $( ".pagination a" ).bind( "click", function(e) {
  event.preventDefault();
    var page = $(this).attr('href').split('page=')[1];
    $('#hidden_page').val(page);

    var query = $('#serach').val();

    $('li').removeClass('active');
    $(this).parent().addClass('active');
    load_data(query,page);

});

Upasana Chauhan
  • 948
  • 1
  • 11
  • 32

2 Answers2

0

You are using e as the arguments in the function(e), not function(event).

Make sure to use the same name. So, you can either change it to:

$( ".pagination a" ).bind( "click", function(event) {
    event.preventDefault();
    // code...
});

or

$( ".pagination a" ).bind( "click", function(e) {
    e.preventDefault();
    // code...
});
herlambang
  • 158
  • 1
  • 1
  • 7
0

I think you include the pagination link in the view 'icons_table_data' right? If so, you should write the event listen like this: $('body').on('click','.pagination a',function(e){...}) because it will not read the event on new created element if you write in your code. Also, change event.preventDefault(); into e.preventDefault(); because you pass the variable name is e

Nguyễn Sơn
  • 13
  • 2
  • @UpasanaChauhan you can change the href of the pagination link to `#!` so that it won't reload the page. then you can try to debug it on the browser to see if the event is triggered – Nguyễn Sơn Jan 27 '20 at 16:06