下面给出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技术站
微信扫一扫 
支付宝扫一扫 