Ajax 点击更新 post 请求 jQuery

Question

我想单击上一个或下一个按钮并更新 ajax post 请求。我要更改的参数是名为“page”的变量。请求的 URL 使用此变量显示正确的页面。当我单击上一个或下一个按钮时，我想更改“页面”变量值。谢谢

$(document).ready(()=>{

var pageSize = "pageSize=10";
//want to change the page number on click
var page = "page=1"

var requestIndex = $.ajax({
    type: 'POST',
    url: `url`,
    beforeSend: function(){
     $("#loading").show();
   },
   complete: function(){
     $("#loading").hide();
   }
});
// console.log(request)
requestIndex.done((data)=>{
  var done = JSON.parse(data)

    //  console.log(done)
    done.forEach((result, index)=>{
    //  res.push(result)
    var firstName = result.FirstName;
    var lastName = result.LastName;
    var modelYear = result.ModelYear;
    var make = result.Make;
    var model = result.Model;
    var dealership = result.Dealership;

      $('#test>tbody').append(`
          <tr>
            <td>${firstName} ${lastName}</td>
            <td>${modelYear}</td>
            <td>${make}</td>
            <td>${model}</td>
            <td>${dealership}</td>
          </tr>
      `)  
  
    })
    var tr = $('table').find("tr");
    var resultQuant =[]
    resultQuant.push(tr)
    var pages = []
      
      //loop over each result and create pagination
      resultQuant.forEach(function(res, index){
        console.log(res.length);
        if(res.length > 9){
          $('#prev_page').append(`
            Prev Page
          `)
          $('#next_page').append(`
            Next Page
          `)
        }
      })    
    });

    requestIndex.fail(function(jqXHR, textStatus) {
          console.log('failed')
    });

})

Answer 1

这是我认为您正在寻找的工作片段。我不得不做出一些改变，一些是为了美观，一些是为了功能。这是函数 changes/updates:

您的整个 ajax/refresh table 脚本需要外包给一个函数，以便可以多次调用它。
page 和 pageSize 变量最好保留为数字而不是 queryString 字符串
我在你的按钮上创建了一个委托事件侦听器。这是一个将处理任一按钮的侦听器。侦听器回调找出是否单击了下一个或上一个按钮，然后使用递增的 onPage 变量

goToPage()

table 现在在每个新数据批写入之前被清除，正如您期望的分页结果
按钮应该 disable/enable 根据分页，所以我放入一个脚本来测试我们是在第一页还是最后一页 disable/enable 他们
我将你所有的 var 都更改为 let 因为这是我们现在初始化块变量的方式

let onPage, pageSize = 10;
$(document).ready(() => {
  goToPage(1)
  $('body').on('click', '#next_page, #prev_page', function() {
    inc = 1;
    if ($(this).attr('id') === 'prev_page') inc = -1;
    goToPage(onPage + inc);
  })
})

function goToPage(page) {
  let requestIndex = $.ajax({
    type: 'POST',
    url: `url`,
    beforeSend: function() {
      $("#loading").show();
    },
    complete: function() {
      $("#loading").hide();
    }
  });
  requestIndex.done((data) => {
    onPage = page;
    $('#test>tbody').html('');
    JSON.parse(data).forEach((result, index) => {
      $('#test>tbody').append(`
          <tr>
            <td>${result.FirstName} ${result.LastName}</td>
            <td>${result.ModelYear}</td>
            <td>${result.Make}</td>
            <td>${result.Model}</td>
            <td>${result.Dealership}</td>
          </tr>
      `)
    })
    if (onPage > 1) $('#prev_page').removeAttr('disabled');
    else $('#prev_page').attr('disabled', true)

    if (JSON.parse(data).length === pageSize) $('#next_page').removeAttr('disabled');
    else $('#next_page').attr('disabled', true)
  });

  requestIndex.fail(function(jqXHR, textStatus) {
    console.log('failed')
  });
}

#loading {
  display: none'

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='loading'>Loading...</div>
<table id='test'>
  <tbody></tbody>
</table>
<button id='prev_page'>Prev Page</button>
<button id='next_page'>Next Page</button>

Ajax 点击更新 post 请求 jQuery

Ajax update post request on click jQuery

javascript

ajax

jquery

post