Laravel中ajax分页的页面加载答案

【问题标题】：Page loading on ajax pagination in LaravelLaravel中ajax分页的页面加载
【发布时间】：2020-05-12 18:14:20
【问题描述】：

我正在尝试实现 ajax 分页。但是当我单击第二页按钮时，ajax 分页正在完美加载。但是当我点击第三页按钮时，它会重新加载整个页面。

这里是搜索功能

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


    }

}

而javascript代码是

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);

});

【问题讨论】：

标签： javascript laravel pagination laravel-6

【解决方案1】：

您使用e 作为function(e) 中的参数，而不是function(event)。

确保使用相同的名称。因此，您可以将其更改为：

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

或

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

【讨论】：

【解决方案2】：

我认为您在视图“icons_table_data”中包含分页链接，对吗？如果是这样，您应该像这样编写事件监听：$('body').on('click','.pagination a',function(e){...})，因为如果您在代码中编写，它将不会读取新创建元素上的事件。另外，将event.preventDefault(); 更改为e.preventDefault();，因为您传递的变量名称是e

【讨论】：

@UpasanaChauhan 您可以将分页链接的 href 更改为 #!，这样它就不会重新加载页面。那么你可以尝试在浏览器上调试一下，看看是否触发了事件