在页面更改时，使用Ajax和jQuery

Question

正如我在其他帖子中写的那样，我对Ajax和jQuery没有令人满意的知识所以请在这里我需要一些帮助..我已经为一些文章建立了分页（每页显示2篇文章 - 现在5页）但我想从数据库表中获取文章信息。我需要Ajax才能做到这一点......有什么想法吗？

文章代码：

<div id="slider">
    <div id="slider-wrapper">
    <div id="slide">
    <div class="row top-buffer">
             <div class="col-md-6">
             <img class="img-rounded" src="img/strawberry-wallpaper.jpg" alt="MyImage" width="550px" height="240px">
               </div>
         <div class="col-md-6">
         <h3>Title</h3>
                            <p class="well">Some Title...<p>

                                    <div class="row top-buffer">

                                        <div class="col-md-5 col-md-offset-1">
                                        <img src="img/link_icon.png" class="img-rounded" width="20px" height="20px"/>
                                        <a href="#">Link</a>
                                        </div>
                                        <div class="col-md-6">

                               <button class="btn btn-primary pull-right" id="btn">Read More</button>



                      </div>
                   </div>
                </div>
             </div>
             .
             .
             .
 </div>
<div id="slider-nav">
    <a href="#" data-slide="0">1</a>
    <a href="#" data-slide="1">2</a>
    <a href="#" data-slide="2">3</a>
    <a href="#" data-slide="3">4</a>
    <a href="#" data-slide="4">5</a>
</div>

Answer 1

我做了类似的分页，看到它真的有帮助

<?php if (isset($patientBills['rows']) && !empty($patientBills['rows'])) { ?>

    <table class="ui cell striped table">
        <thead>
            <tr>

                <th rowspan="2">Bill No</th>
                <th rowspan="2">Bill Date & Time</th>
            </tr>

        </thead>
        <tbody>
            <tbody>
                <?php  $rowindex =1;      foreach ($patientBills['rows'] as $bill) {
      ?>
                    <tr>
                        <td>
                            <a title="View Bill" href="<?php echo BILLING_PATH .  'patient/' . $bill['patient_id'] . '/' . $rowindex * $page; ?>">
                                <?php echo $bill['bill_no']; ?>
                            </a>
                        </td>
                        <td>
                            <?php $date=date_create($bill['paid_date']); echo date_format($date, DATE_FORMAT); ?>
                        </td>

                    </tr>
                    <?php } ?>

            </tbody>
        </tbody>
<?php if ($patientBills['totalpages'] > 1) { ?>
        <tfoot>
            <tr>
                <th colspan="9">
                    <div class="ui floated right border pagination menu ">
                        <a id="previousbtn" name="pageNavbtn" class="<?php echo $patientBills[ 'page']==1 ? 'disabled': ''; ?> item">
                            <i class="left arrow icon"></i> Previous </a>
                        <?php 
                            $startPage = 1;
                            $loop = 0;
                            if ($patientBills['page'] > NO_OF_PAGES) {
                                $startPage = $patientBills['page'] - NO_OF_PAGES + 2;
                            }
                            for ($pag = $startPage; $pag <= $patientBills["totalpages"]; $pag++) { $loop ++?>
                            <a href="#" class="<?php  echo $patientBills['page']== $pag ? 'disabled': ''; ?> item" name="patientPageLink" id="<?php echo $pag; ?>">
                                <?php echo $pag; ?>
                            </a>
                            <?php $loop == NO_OF_PAGES ? $pag = $patientBills["totalpages"] + 1:''; ?>
                                <?php } 
                    if ($patientBills["totalpages"] > NO_OF_PAGES) { ?>
                                    <a id="nextPagebtn" name="pageNavbtn" class="<?php  echo $patientBills['page'] == $patientBills['totalpages'] ? 'disabled':''; ?> item">Next&nbsp;
                        <i class="icon right arrow"></i></a>
                                    <?php } ?>
                    </div>
                </th>
            </tr>
        </tfoot>
<?php  } ?>
    </table>
    <?php  } else {?>
No bills created for this patient.
<?php  } ?>

        <script>



            $('a[name=pageNavbtn], a[name=patientPageLink]').click(function () {
                var currentPage = <?php echo $patientBills['page']; ?>;
                var totalpages = <?php echo $patientBills['totalpages']; ?>;
                if (this.id == 'previousbtn') {
                    if (currentPage > 1) {
                        currentPage -= 1;
                    }
                } else if (this.id == 'nextPagebtn') {
                    if (currentPage < totalpages) {
                        currentPage += 1;
                    }
                } else {
                    currentPage = this.id;
                }
                var postData = {
                    page: currentPage
                    , patientId: <?php echo $patientId;?>
                };
                var Url = "<?php echo PATIENT_PATH . GET_BILL_LIST_BY_PAGENO; ?>";
                triggerAjaxPost(Url, postData, function (resdata) {
                    $('#billlistcontainer').html(resdata);
                });
            });

        </script>

// resdata将以html格式构建

// DB Query
$count_query   = "
                SELECT
                     COUNT(*) as count
                FROM
                    patient_billing 
                    WHERE
                    patientid  = "  . $patientid;

        $result_count = mysqli_query($this->_connection, $count_query); 
           $rowcount = mysqli_fetch_array($result_count);
            $count = $rowcount['count']; 
            $limit  = $this->_limit;
            $page = $this->_page;
            $sidx = $this->_sidx;
            $sort = $this->_sort;
    $sortBy = $this->_sidx;
    if (empty($sort)){
        $sort =  'desc';
    }
    if (empty($limit)){
        $limit =  1;
    }
    if (empty($page)){
        $page =  1;
    }
        if (empty($sortBy)){
        $sortBy =  '  bill_no ';
    }

        if($count > 0 && $limit > 0) { 
          $total_pages = ceil($count/$limit); 
        } else { 
          $total_pages = 0; 
        } 
        if ($page > $total_pages) $page=$total_pages;

        $start = $limit * $page - $limit;

        if($start <0) $start = 0;

        $query     = "
                     SELECT
                     *
                FROM
                    patient_billing 
                    WHERE
                    patientid  = "  . $patientid . " " .
            "  ORDER BY " . $sortBy .  " " . $sort
            . " LIMIT " . $start .",". $limit;
    $result   = mysqli_query($this->_connection, $query) or die("Couldn't execute query: " . mysqli_error($this->_connection));

        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) {                
              $responce[] = $row;
            }
        }

    $patientBills= array("totalpages"=>$total_pages, "page"=>$page, "records"=>$count, "rows"=>$responce);