使用MySQL,PHP和AngularJS进行服务器端分页

Question

这是我在这个网站上的第一篇文章,虽然我已经完成了2分钟.如果这个问题看起来错位或不符合网站规则,请引导我朝正确的方向前进.

我创建/修改了一个PHP脚本(如下所示),它将MySQL表格放在JSON格式中.我正在使用700,000多行,所以我认为我最好的选择是使用分页.

<?php 
require('connection.php');
header('Content-Type: application/json');

ini_set("max_execution_time", "-1");
ini_set("memory_limit", "-1");
ignore_user_abort(true);
set_time_limit(0);

// PortalActivity Table - JSON Creation

$limit = $_POST['limit']; //the pagesize
$start = $_POST['start']; //Offset
$dir = $_POST['dir']; // DESC or ASC
$sort = $_POST['sort'];// the column

switch ($sort) {
    case "CallerPhoneNum": $orderby = "CallerPhoneNum"; break;
    case "Carrier": $orderby = "Carrier"; break;
    case "TotalLookups": $orderby = "TotalLookups"; break;
    case "TotalBlocks": $orderby = "TotalBlocks"; break;
    case "TotalComplaints": $orderby = "TotalComplaints"; break;
    case "ActivityRanking": $orderby = "ActivityRanking"; break;
    case "CallerType": $orderby = "CallerType"; break;
}

$sql = "SELECT COUNT(*) AS count FROM portal.PortalActivity";
$result = $conn->query($sql);
$row = $result->fetch(PDO::FETCH_ASSOC);
$count = $row['count'];

$query = "SELECT * FROM portal.PortalActivity ORDER BY $orderby $dir LIMIT $start, $limit";

$result = $conn->query($query);

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $PortalActivity[] = array(
        'CallerPhoneNum' => $row['CallerPhoneNum'],
        'Carrier' => $row['Carrier'],
        'TotalLookups' => $row['TotalLookups'],
        'TotalBlocks' => $row['TotalBlocks'],
        'TotalComplaints' => $row['TotalComplaints'],
        'ActivityRanking' => $row['ActivityRanking'],
        'CallerType' => $row['CallerType']
        );
}

$myData = array('PortalActivity' => $PortalActivity, 'totalCount' => $count);

echo json_encode($myData);


?>

代码为我提供了所有行中的数据以及行的总计数.

我有一个使用AngularJS的bootstrap框架.我想使用分页将数据放在表中.因此,当用户点击"下一步"或点击新页面时,服务器将仅每页加载必要的记录(10,25,50或100).

我知道我需要:1.)在我的控制器中创建分页2.)从我的控制器获取数据到我的php文件,以便它可以正确地接收正确的限制和抵消.3.)在我的视图中显示

我是这些语言的新手,我发现自己很快就得到了这个演示.如何让这些文件协同工作(PHP,JS和HTML)以正确显示我需要的分页？

这是我的原始控制器,它只是在过滤后的视图中显示数据.如下所示,我使用$ http.get来获取数据.这个控制器工作,但我需要进一步分页:

 app.controller('counterCtrl', function($scope, $http, $filter, filterFilter) { 

     $scope.Unknown = 'UK';
     $scope.NonProfit = 'NP';
     $scope.Political = 'PL';
     $scope.Prison = 'PR';

    $scope.getCount = function(strCat) {
        return filterFilter( $scope.items, {CallerType:strCat}).length;
    }

    $http.get("http://xx.xxx.xx.xx/php/jsoncreatePA.php")
        .success(function (data) {
            $scope.items = data.PortalActivity;
            });
 })

这是我用工作控制器创建的视图的一部分:

<section id="main-content" class="animated fadeInRight">
  <div class="row">
        <div class="col-md-12">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">Unknown</h3>

                  </div>
                <div class="panel-body">
                <table id="example" class="table table-striped table-bordered" datatable="" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Caller Number</th>
                            <th>Total Lookups</th>
                            <th>Total Blocks</th>
                            <th>Total Complaints</th>
                            <th>Activity Percentage</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr data-ng-repeat = "x in items | filter: { CallerType : Unknown }">
                            <td>{{x.CallerPhoneNum}}</td>
                            <td>{{x.TotalLookups}}</td>
                            <td>{{x.TotalBlocks}}</td>
                            <td>{{x.TotalComplaints}}</td>
                            <td>{{x.ActivityRanking}}</td>
                        </tr>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

对于遇到这个问题的任何人，我都找到了这个问题的答案。请注意，正如 DOS 先生在之前的评论中提到的那样，这很容易受到 SQL 注入的攻击，稍后我将修改 PHP 代码。但目前这给了我所需要的，也许它会帮助其他人。

我需要对 PHP 进行一些更改：

<?php 
require('connection.php');
header('Content-Type: application/json');

// NetworkActivity Table - JSON File Creation

$pagenum = $_GET['page'];
$pagesize = $_GET['size'];
$offset = ($pagenum - 1) * $pagesize;
$search = $_GET['search'];

if ($search != "") {
    $where = "WHERE Carrier LIKE '%" . $search . "%'";
} else {
    $where = "";
}

$sql = "SELECT COUNT(*) AS count FROM PortalActivity $where";
$result = $conn->query($sql);
$row = $result->fetch(PDO::FETCH_ASSOC);
$count = $row['count'];

$query = "SELECT * FROM portal.PortalActivity $where ORDER BY Carrier, CallerPhoneNum LIMIT $offset, $pagesize";

$result = $conn->query($query);

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $PortalActivity[] = array(
        'CallerPhoneNum' => $row['CallerPhoneNum'],
        'Carrier' => $row['Carrier'],
        'TotalLookups' => $row['TotalLookups'],
        'TotalBlocks' => $row['TotalBlocks'],
        'TotalComplaints' => $row['TotalComplaints'],
        'ActivityRanking' => $row['ActivityRanking'],
        'CallerType' => $row['CallerType']
        );
}

$myData = array('PortalActivity' => $PortalActivity, 'totalCount' => $count);

echo json_encode($myData);

?>

至于控制器，我们复制了分页并从 URL 中的 $http.get 获取 PHP $_GET，其中包含页面、大小和搜索。

// Portal Activity Table Control
 app.controller('activityTableCtrl', function($scope, $http) {

    $scope.currentPage = 1;
    $scope.totalItems = 0;
    $scope.pageSize = 10;
    $scope.searchText = '';
    getData();

    function getData() {
     $http.get('http://xx.xxx.xx.xx/php/jsoncreatePA.php?page=' + $scope.currentPage + '&size=' + $scope.pageSize + '&search=' + $scope.searchText)
        .success(function(data) {
            $scope.activity = [];
            $scope.totalItems = data.totalCount;
            $scope.startItem = ($scope.currentPage - 1) * $scope.pageSize + 1;
            $scope.endItem = $scope.currentPage * $scope.pageSize;
            if ($scope.endItem > $scope.totalCount) {$scope.endItem = $scope.totalCount;}
            angular.forEach(data.PortalActivity, function(temp){
                $scope.activity.push(temp);
            });
        });
    }

    $scope.pageChanged = function() {
        getData();
    }
    $scope.pageSizeChanged = function() {
        $scope.currentPage = 1;
        getData();
    }
    $scope.searchTextChanged = function() {
        $scope.currentPage = 1;
        getData();
    }
 }) 

最后，我们更改了视图以适应分页控件。

<section id="main-content" class="animated fadeInRight">
    <div class="row">
        <div class="col-md-12" ng-controller="activityTableCtrl">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Unknown</h3>
              </div>
              <div class="panel-body">
              <!-- TOP OF TABLE: shows page size and search box -->
              <div class="dataTables_wrapper form-inline" role="grid">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="dataTables_length" id="example_length">
                            <label>
                            <select name="example_length" aria-controls="example" class="form-control input-sm" ng-model="pageSize" ng-change="pageSizeChanged()">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select> records per page</label>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div id="example_filter" class="dataTables_filter">
                            <label>Search:<input type="search" class="form-control input-sm" aria-controls="example" ng-model="searchText" ng-change="searchTextChanged()"></label>
                        </div>
                    </div>
                </div>                        

                <!-- DATA TABLE: shows the results -->
                <!-- <table id="example" class="table table-striped table-bordered" datatable="" cellspacing="0" width="100%"> -->
                <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Caller Number</th>
                        <th>Total Lookups</th>
                        <th>Total Blocks</th>
                        <th>Total Complaints</th>
                        <th>Activity Percentage</th>
                    </tr>
                </thead>

                <tbody>
                    <tr ng-repeat = "x in activity">
                        <td>{{x.CallerPhoneNum}}</td>
                        <td>{{x.TotalLookups}}</td>
                        <td>{{x.TotalBlocks}}</td>
                        <td>{{x.TotalComplaints}}</td>
                        <td>{{x.ActivityRanking}}</td>
                    </tr>
                </tbody>
                </table>

                <!-- BOTTOM OF TABLE: shows record number and pagination control -->
                <div class="row">
                    <div class="col-sm-6">
                        <div class="dataTables_info" ole="alert" aria-live="polite" aria-relevant="all">Showing {{startItem}} to {{endItem}} of {{totalItems}} entries</div>
                    </div>
                    <div class="col-sm-6">
                        <div class="dataTables_paginate paging_simple_numbers">
                        <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="pageSize" max-size="3" boundary-links="true" rotate="false" ></pagination>
                        </div>
                    </div>
                </div>                      
              </div>
              </div>
            </div>
        </div>
    </div>
 </section>