angular js +php 无刷新分页

最新推荐文章于 2021-04-07 20:42:05 发布

chenshi1874

最新推荐文章于 2021-04-07 20:42:05 发布

阅读量97

点赞数

文章标签： php javascript json ViewUI

原文链接：https://my.oschina.net/u/3255899/blog/841473

版权

目录结构（js存放js文件）

js文件夹

index.html

关键代码

完整index html代码

<!DOCTYPE>
<html lang="en" ng-app="hello">
<title>Jquery结合angular.js与bootstrap.js实现无刷新翻页+查找</title>
   <header>
       <meta charset="UTF-8">
       <script src="js/angular.min.js"></script>
       <script src="js/ui-bootstrap-tpls.min.js"></script>
       <link href="css/bootstrap.css" rel="stylesheet">
</header>
<body ng-controller="Hello">
   <div class="introduction">

       <div id="page" class="page">
           <form id="searchForm" method="post">
               <fieldset>
                   <input id="s" type="text" placeholder="选择区域" ng-model="filter.$"/>
               </fieldset>
           </form>
       </div>
   </div>
   <div class="tabl1">
       <table class="table table-bordered">
           <thead>
               <tr>
                   <th>编号</th>
                   <th>媒体形式</th>
                   <th>社区名称</th>
                   <th>社区地址</th>
                   <th>媒体编号</th>
                   <th>社区类型</th>
                   <th>社区等级</th>
                   <th>社区建设年代</th>
                   <th>居民人数（户）</th>
                   <th>房价（元）</th>
                   <th>面积</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="item in items|filter:filter|paging:page.index:page.size">
                   <td>{{item.id}}</td>
                   <td>{{item.Media}}</td>
                   <td>{{item.communityName}}</td>
                   <td>{{item.ardess}}</td>
                   <td>{{item.MediaNumber}}</td>
                   <td>{{item.CommunityType}}</td>
                   <td>{{item.Communitylevel}}</td>
                   <td>{{item.birthday}}</td>
                   <td>{{item.People}}</td>
                   <td>{{item.Prices}}</td>
                   <td>{{item.mianji}}</td>
               </tr>

</tbody>

       </table>
       <pagination total-items="items|filter:filter|size" ng-model="page.index" max-size="5"
items-per-page="page.size"
class="pagination-sm pull-right" boundary-links="true"></pagination>
       <script>
var itemsList = angular.module('hello',['ui.bootstrap']);
   itemsList.controller('Hello', function($scope, $http){
           $scope.items=[ ]


console.log($scope.total);
$scope.ini=1;
$scope.num=1;
$scope.page = {size:4, index: 1};
               //$scope.page1 = {'size':size, 'index': index};
               $http({
method: 'get', url: "json.php", params: $scope.page
}).success(function (data1) {
               console.log(data1.result);
$scope.items=data1.result;
               //$scope.total=$scope.items.length;

}

);


   })
itemsList.filter('paging', function() {

return function (items, index, pageSize) {

if (!items)
return [];

var offset = (index - 1) * pageSize;
return items.slice(offset, offset + pageSize);
}
});
itemsList.filter('size', function() {
return function (items) {
if (!items)
return 0;

return items.length || 0
}
});
</script>
</div>

</body>
</html>

json.php代码

php模拟数据

json.php完整代码

<?php
$arr=array();
$arr['result'][0]['id']=4;
$arr['result'][0]['Media']=$_POST['size'];
$arr['result'][0]['communityName']=$_POST['index'];
$arr['result'][0]['ardess']=$_GET['size'];
$arr['result'][0]['MediaNumber']=$_GET['size'];
$arr['result'][0]['Communitylevel']="灯箱0";
$arr['result'][0]['CommunityType']="灯箱0";
$arr['result'][0]['birthday']="灯箱0";
$arr['result'][0]['People']="灯箱0";
$arr['result'][0]['Prices']="灯箱3";
$arr['result'][0]['mianji']="灯箱3";

$arr['result'][1]['id']=5;
$arr['result'][1]['Media']="灯箱1";
$arr['result'][1]['communityName']="多发点1";
$arr['result'][1]['ardess']="灯箱1";
$arr['result'][1]['MediaNumber']="灯箱3";
$arr['result'][1]['Communitylevel']="灯箱3";
$arr['result'][1]['CommunityType']="灯箱3";
$arr['result'][1]['birthday']="灯箱3";
$arr['result'][1]['People']="灯箱3";
$arr['result'][1]['Prices']="灯箱3";
$arr['result'][1]['mianji']="灯箱3";

$arr['result'][2]['id']=6;
$arr['result'][2]['Media']="灯箱7";
$arr['result'][2]['communityName']="多发点";
$arr['result'][2]['ardess']="灯箱3";
$arr['result'][2]['MediaNumber']="灯箱3";
$arr['result'][2]['Communitylevel']="灯箱3";
$arr['result'][2]['CommunityType']="灯箱3";
$arr['result'][2]['birthday']="灯箱3";
$arr['result'][2]['People']="灯箱3";
$arr['result'][2]['Prices']="灯箱3";
$arr['result'][2]['mianji']="灯箱3";

$arr['result'][3]['id']=7;
$arr['result'][3]['Media']="灯箱3";
$arr['result'][3]['communityName']="多发点";
$arr['result'][3]['ardess']="灯箱3";
$arr['result'][3]['MediaNumber']="灯箱3";
$arr['result'][3]['Communitylevel']="灯箱3";
$arr['result'][3]['CommunityType']="灯箱3";
$arr['result'][3]['birthday']="灯箱3";
$arr['result'][3]['People']="灯箱3";
$arr['result'][3]['Prices']="灯箱3";
$arr['result'][3]['mianji']="灯箱3";

$arr['result'][4]['id']=8;
$arr['result'][4]['Media']="灯箱3";
$arr['result'][4]['communityName']="多发点";
$arr['result'][4]['ardess']="灯箱3";
$arr['result'][4]['MediaNumber']="灯箱3";
$arr['result'][4]['Communitylevel']="灯箱3";
$arr['result'][4]['CommunityType']="灯箱3";
$arr['result'][4]['birthday']="灯箱3";
$arr['result'][4]['People']="灯箱3";
$arr['result'][4]['Prices']="灯箱3";
$arr['result'][4]['mianji']="灯箱3";

echo json_encode($arr);

转载于:https://my.oschina.net/u/3255899/blog/841473