2015-09-29 36 views
0

的錶行分頁中未定義valLists我使用此代碼http://www.jitendrazaa.com/blog/webtech/web/pagination-and-sorting-of-data-table-using-angularjs/的一部分作爲AngularJS的分頁,但我想使用名爲'user'的MySQL DB表中的數據... ...但是,我面臨一個錯誤,valLists是未定義的,所以它返回null並且什麼都不顯示....我認爲數據的類型來自select.php導致,並且我dnt知道如何解決它..任何幫助!錯誤:在使用AngularJS,AJAX

HTML代碼:

<body> 
    <br /> 
     <br /> 
     <div ng-app="myApp"> 
      <div ng-controller="TableCtrl"> 

       <table class="table"> 
        <thead> 
         <tr> 
          <th class="id">User Id 
          </th> 
          <th class="name">Name 
          </th> 
          <th class="phone">Phone 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="item in ItemsByPage[currentPage]"> 
          <td>{{item.id}}</td> 
          <td>{{item.name}}</td> 
          <td>{{item.phone}}</td> 
         </tr> 
        </tbody> 
       </table> 

       <ul class="pagination"> 
        <li><a href="#" ng-click="firstPage()">First</a> 

        </li> 
        <li ng-repeat="n in range(ItemsByPage.length)"> <a href="#" ng-click="setPage()" ng-bind="n+1">1</a> 

        </li> 
        <li><a href="#" ng-click="lastPage()">Last</a> 

        </li> 
       </ul> 
      </div> 
     </div> 
</body> 

JavaScript代碼:

var myApp = angular.module('myApp', []); 
     myApp.service('ListService', function() {     
      this.paged = function (valLists, pageSize) { 
       retVal = [];     
       for (var i = 0; i < valLists.length; i++) { 
        if (i % pageSize === 0) { 
         retVal[Math.floor(i/pageSize)] = [valLists[i]]; 
        } else { 
         retVal[Math.floor(i/pageSize)].push(valLists[i]); 
        } 
       } 
       return retVal; 
      }; 
     }); 

     var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService) { 
      $scope.pageSize = 2; 
      $scope.allItems = getData(); 

      $scope.resetAll = function() { 
       $scope.List = $scope.allItems; 
       $scope.newId = ''; 
       $scope.newName = ''; 
       $scope.newPhone = ''; 
       $scope.currentPage = 0; 
      }; 
      function getData1(){ 
       return [{ 
         id : 33, 
         name : 'hala', 
         phone: 12345 
       }] 
      }; 
      var d = new Array(); 
      function getData() { 
        $.ajax ({ 
        url: "select.php", 
        type: 'POST', 
        //dataType: "json", 
        data: '', 
        success: function(data) { 
         d = data; 

         // alert('succ'); 
        }, 
        error: function() { 

         alert('Error select'); 
        } 
        });  
        // alert(d); 
       return d; 
      } 
$scope.pagination = function() { 
       $scope.ItemsByPage = ListService.paged($scope.List, $scope.pageSize); 

      }; 

      $scope.setPage = function() { 
       $scope.currentPage = this.n; 
      }; 

      $scope.firstPage = function() { 
       $scope.currentPage = 0; 
      }; 

      $scope.lastPage = function() { 
       $scope.currentPage = $scope.ItemsByPage.length - 1; 
      }; 

      $scope.range = function (input) { 
       var ret = [];      
       for (var i = 0; i < input; i++) { 
        if (i != 0 && i != input - 1) { 
         ret.push(i); 
        } 
       } 
       return ret; 
      }; 

      $scope.resetAll();    
      $scope.pagination(); 

     }); 

select.php代碼

<?php 
header('Content-Type: application/json'); 
include 'connect.php'; 
$db = new database(); 
$db->setDb_name('training'); 
$db->connect(); 

$db->select('user',"*"); 
$data = $db->getResult();  
echo json_encode($data); 
?> 

這裏是選擇功能:

public function select($table, $rows, $where = null){   
    $case = 0; 

    if($this->tableExists($table)) 
    {   
     $q = ' SELECT ' .$rows.' FROM '.$table; 
     $query = @mysql_query($q);     

     $this->numresults = mysql_num_rows($query); 
     for($i = 0; $i < $this->numresults; $i++) 
     { 
      $r = mysql_fetch_array($query); 
      $key = array_keys($r); 
      for($x = 0; $x < count($key); $x++) 
      { 
       // Sanitizes keys so only alphavalues are allowed 
       if(!is_int($key[$x])) 
       { 
        if(mysql_num_rows($query) > 1) 
         $this->result[$i][$key[$x]] = $r[$key[$x]]; 
        else if(mysql_num_rows($query) < 1) 
         $this->result = null; 
        else 
         $this->result[$key[$x]] = $r[$key[$x]]; 
       } 
       // $this->result[$i][$key[$x]] = $r[$key[$x]]; 
      } 
     } 
     // print_r ($this->result)."<br/>"; 


    } 
    else 
     return false; 

}  

和的getResult()函數:

public function getResult() { 
    return $this->result; 
} 

注1:當使用功能getData1()代替的getData()效果很好。 注2:我確信,選擇功能運作良好,並把數據,如:

[{"id":"3","name":"newname","phone":"321"}, 
{"id":"4","name":"nnnnnnnnnnn","phone":"66555566"},  {"id":"10","name":"dss","phone":"45321"}, {"id":"11","name":"www","phone":"1234"}, {"id":"15","name":"fghjkl","phone":"34567890"}] 
+0

這是因爲你不知道'ajax' –

+0

你能解釋一下請,或者告訴我該怎麼做'asynchronous'的含義是什麼? –

回答

0

嘗試我們的角度的$ HTTP服務。像這樣的東西。

var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService, $http) { 
    // ... 
    $http.post('select.php') 
     .success(function(response) { 
      $scope.allItems = response; 
     }); 

    // ... 
} 
+0

同樣的錯誤仍然出現.. 和我使用'警報(響應)',並顯示警報包括這['對象對象],[對象對象],[對象對象]' 你知道爲什麼嗎? –

+0

使用控制檯日誌查看實際發生的情況。使用alert()並不是那麼有用。該響應應該包含來自你的php的數據。在將數據分配給$ scope.alItems之前,您可以處理邏輯(用於分頁) – adelineu