php - 具有不同 ID 的多个按钮事件的 JQuery 函数

Question

下面的代码创建多页按钮。

<?php
for($i=1; $i<=$this->total_pages; $i++)
{
  echo "<button class='btn page' id='next".$i."' value='".$i."'>".$i."</button>";
}
?>

下面的页面 View 如下所示

1 2 3 4 5 6 ........//I dont know how many pages

在下面的代码中，我只想捕获由用户触发的值的 id。我不知道 ID 名称。

<script>
    $( document ).ready(function() {
     $('button[id^="next"]').on('click', function() {
        var page = ($(this).attr('value'));
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: ({page:page}),
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $(this).hide();
     });
    });
</script>

My question is that why my script is append rows wrong after click on any page. when i click on 2 it appends 10 rows. after then i click on 3 it appends 6 rows after then i click on 4 it appends 1 row. why?

我的 Controller 页面如下

<?php
include "model/login_class.php";
include "view/template/product_class.php";
$tplLogin=new LoginTpl();
$sqlLogin=new sqlLogin();
//echo $_GET['page']; exit;
$total_results = $sqlLogin->totalproduct();
$per_page = 5;
$total_pages = ceil($total_results / $per_page);
$tplLogin->total_pages = $total_pages;
if (isset($_GET['page'])) {
    $show_page = $_GET['page']; //current page
    if ($show_page > 0 && $show_page <= $total_pages) {
        $start = ($show_page - 1) * $per_page;
        $end = $start + $per_page;
    } else {
        // error - show first set of results
        $start = 0;              
        $end = $per_page;
    }
} else {
    // if page isn't set, show first set of results
    $start = 0;
    $end = $per_page;
}
// display pagination
$sqlLogin->start = $start;
$sqlLogin->end = $end;
$tplLogin->products = $sqlLogin->product();
$tplLogin->product();
?>

Answer 1

No need to know id, use separate class for button

试试这个。

$('button.page').on('click', function() {
/*your class */
        var page = $(this).attr('value');
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: {page:page},
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $("button.page").show();
        $(this).hide();
     });

希望这对你有帮助:)