angularJs中datatable实现代码

下面给出AngularJS中datatable实现代码的完整攻略，这里使用的是AngularJS版本为1.x，实现过程中需要使用一些第三方库来支持。攻略分成以下几个步骤：

步骤一安装必需的依赖

在开始之前，你需要在本地安装以下库：

jQuery：用于操作DOM和事件处理
Bootstrap：用于样式
AngularJS：主要的MVC框架

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

步骤二安装 DataTables 插件

为了能使用 DataTables 插件，需要将其下载下来并包含在项目中。下载地址：https://datatables.net/ 下载后需要包含以下文件：

<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>

步骤三创建 AngularJS 应用程序

<div ng-app="myApp" ng-controller="myCtrl">
...
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
});

步骤四生成静态表格

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>

步骤五初始化 DataTables

在AngularJS 控制器中，通过 jQuery 的 DataTables 插件来初始化静态表格：

var table = $('#example').DataTable();

这样会将静态表格转变成 DataTables 表格，具备排序、搜索等功能。

示例一：绑定 AngularJS 数据模型

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in datas">
      <td>{{person.name}}</td>
      <td>{{person.position}}</td>
      <td>{{person.office}}</td>
      <td>{{person.age}}</td>
      <td>{{person.start_date}}</td>
      <td>{{person.salary}}</td>
    </tr>
  </tbody>
</table>

$scope.datas = [
  {
    "name": "Tiger Nixon",
    "position": "System Architect",
    "office": "Edinburgh",
    "age": "61",
    "start_date": "2011/04/25",
    "salary": "$320,800"
  },
  {
    "name": "Garrett Winters",
    "position": "Accountant",
    "office": "Tokyo",
    "age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750"
  },
  ...
];

$scope.$on('$viewContentLoaded', function() {
  var table = $('#example').DataTable({
    data: $scope.datas,
    columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'office' },
      { data: 'age' },
      { data: 'start_date' },
      { data: 'salary' }
    ]
  });
});

这样，在初始化 DataTables 实例时，将数据模型绑定到了表格上，可以直接显示数据。

示例二：服务端分页、搜索

$scope.$on('$viewContentLoaded', function() {
  var table = $('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "data.php",
    "columns": [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "age" },
      { "data": "start_date" },
      { "data": "salary" }
    ]
  });
});

在这个示例中，我们将 DataTabes 的 serverSide 参数设置为 true，这意味着我们将使用服务器端分页、排序和搜索。对于此示例，我们需要在服务器端编写来自数据库的数据的查询语句，并将此编写为PHP文件。

<?php
// Database connection
$db_host = 'localhost';
$db_user = 'root';
$db_password = '';
$db_database = 'mydb';
$conn = mysqli_connect($db_host, $db_user, $db_password, $db_database);

// DataTables PHP library for server-side processing
require 'https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css';
require 'https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js';
require 'https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js';

// SQL query to get data from database
$sql = "SELECT * FROM employee";

// Get total number of records
$totalRecords = mysqli_query($conn, $sql);
$totalRecords = mysqli_num_rows($totalRecords); 

// Get total number of records with filtering
$filter = $_REQUEST['search']['value'];
if(!empty($filter)){
    $sql .= " WHERE name LIKE '%$filter%'";
}
$totalResult = mysqli_query($conn, $sql);
$totalResult = mysqli_num_rows($totalResult); 

// SQL query to get data from database
$sql .= " ORDER BY name ASC "; 
$sql .= " LIMIT ".$_REQUEST['start']." ,".$_REQUEST['length']."   ";
$stmt = $conn->prepare($sql);
$stmt->execute(); 
$result = $stmt->get_result();

// Fetch data into array
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// Response generation
$response = array(
    "draw" => intval($_REQUEST['draw']),
    "iTotalRecords" => $totalRecords,
    "iTotalDisplayRecords" => $totalResult,
    "aaData" => $data
);

header('Content-Type: application/json');
echo json_encode($response);
?>

其中，处理分页、搜索、排序等功能的核心代码段为：

// Get total number of records with filtering
$filter = $_REQUEST['search']['value'];
if(!empty($filter)){
    $sql .= " WHERE name LIKE '%$filter%'";
}
$totalResult = mysqli_query($conn, $sql);
$totalResult = mysqli_num_rows($totalResult); 

// SQL query to get data from database
$sql .= " ORDER BY name ASC "; 
$sql .= " LIMIT ".$_REQUEST['start']." ,".$_REQUEST['length']."   ";

数据请求和响应完毕后，需要填充到 DataTables 实例中。

$scope.$on('$viewContentLoaded', function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax":{
            url :"data.php", // json datasource
            type: "post",  // method  , by default get
            error: function(){  // error handling
                $("#example").append('<tbody><tr><th colspan="3">数据加载中...</th></tr></tbody>');
            }
        },
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    });
});

这样，我们就完成了一个带分页、搜索功能的 DataTables 示例。

以上就是AngularJS中datatable实现代码的完整攻略了，以上演示的代码都已经可以在实例中运行，读者可以根据自身实际需求修改代码，并进行拓展。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：angularJs中datatable实现代码 - Python技术站