AdminLTE Pagination - с чего начать? - PullRequest
0 голосов
/ 07 ноября 2019

Я создаю приложение веб-базы данных в PHP PDO, используя шаблон AdminLTE и Booststrap 3. Мне нужно добавить нумерацию страниц в свое приложение (так как у меня большое количество записей) и иметь ограничение в 25 записей на страницу. Я довольно новичок в программировании и понятия не имею, с чего начать. Любая помощь будет оценена.

<?php
  $content = '<div class="row">
                <div class="col-xs-12">
                <div class="box box-danger">
                  <div class="box-header">
                    <h3 class="box-title">Members List</h3>
                  </div>
                  <!-- /.box-header -->
                  <div class="box-body">
                    <table id="members" class="table table-bordered table-hover">
                      <thead>
                      <tr>
                        <th>Name</th>
                        <th>Residential Address</th>
                        <th>Mailing Address</th>
                        <th>Precinct</th>
                        <th>Age</th>
                        <th>Ethnicity</th>
                        <th>Gender</th>
                        <th>Party</th>
                        <th>Race</th>
                        <th>Phone Number</th>
                        <th>Action</th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>
                      <tr>
                        <th>Name</th>
                        <th>Residential Address</th>
                        <th>Mailing Address</th>
                        <th>Precinct</th>
                        <th>Age</th>
                        <th>Ethnicity</th>
                        <th>Gender</th>
                        <th>Party</th>
                        <th>Race</th>
                        <th>Phone Number</th>
                        <th>Action</th>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                  <!-- /.box-body -->
                </div>
                <!-- /.box -->
              </div>
            </div>';
  include('../master.php');
?>
<!-- page script -->
<script>
  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "../api/member/read.php",
        dataType: 'json',
        success: function(data) {
            var response="";
            for(var user in data){
                response += "<tr>"+
                "<td>"+data[user].name+"</td>"+
                "<td>"+data[user].residential_address+"</td>"+
                "<td>"+data[user].mailing_address+"</td>"+
                "<td>"+data[user].precinct+"</td>"+
                "<td>"+data[user].age+"</td>"+
                "<td>"+data[user].ethnicity+"</td>"+
                "<td>"+data[user].gender+"</td>"+
                "<td>"+data[user].party+"</td>"+
                "<td>"+data[user].race+"</td>"+
                "<td>"+data[user].phone+"</td>"+
                "<td><a href='update.php?id="+data[user].id+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id+"')>Remove</a></td>"+
                "</tr>";
            }
            $(response).appendTo($("#members"));
        }
    });
  });
  function Remove(id){
    var result = confirm("Are you sure you want to delete the selected member from the database?"); 
    if (result == true) { 
        $.ajax(
        {
            type: "POST",
            url: '../api/member/delete.php',
            dataType: 'json',
            data: {
                id: id
            },
            error: function (result) {
                alert(result.responseText);
            },
            success: function (result) {
                if (result['status'] == true) {
                    alert("The member was successfully removed from the database.");
                    window.location.href = '/ccrp/members';
                }
                else {
                    alert(result['message']);
                }
            }
        });
    }
  }
</script>
...