1. Python技术站首页
  2. 其他
  3. JavaScript

angularJs中datatable实现代码

• JavaScript

下面给出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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS co 函数库的含义和用法实例总结

    JS co 函数库的含义和用法实例总结 含义 co 函数库是一个基于生成器的异步流程控制库，它可以让你用更加优雅的方式写异步代码，避免了回调嵌套的问题。co 函数库可以自动将 yield 表达式的返回值封装成 Promise 对象，并使用 Promise 对象来统一处理错误。 安装 在 Node.js 中通过 npm 安装 co 函数库： npm insta…

    JavaScript 2023年5月27日
    00

  • javascript中的undefined和not defined区别示例介绍

    下面是“javascript中的undefined和not defined区别示例介绍”的详细攻略： 1. 什么是undefined和not defined 在javascript中，undefined和not defined是两个非常常见的概念，不过千万不要把它们混淆。 当JavaScript中使用一个还未被声明的变量时，JavaScript会抛出一个“未…

    JavaScript 2023年5月18日
    00

  • 解析页面加载与js函数的执行 onload or ready

    解析页面加载与js函数的执行 onload or ready 页面加载过程 当浏览器加载一个页面时，会按照以下步骤逐步完成页面的加载： 浏览器通过DNS解析获取目标网站的IP地址 浏览器向服务器发出请求，获取HTML文件 浏览器开始解析HTML，构建DOM树 遇到CSS和JS文件时，浏览器会解析它们，并执行其中的代码 解析完成后，浏览器构建出渲染树 渲染树和…

    JavaScript 2023年6月11日
    00

  • 关于导入excel时js转换时间的正确方式

    针对“关于导入Excel时JS转换时间的正确方式”的问题，我准备提供以下攻略： 标准日期格式 在Excel中，日期一般使用“yyyy-mm-dd”或“yyyy/mm/dd”的格式表示，如果以文本形式存储的话，在JS中转换日期时会出现错误。因此，在将Excel表格中的日期数据导入时，需要对日期进行预处理，将其按照标准的日期格式进行存储。这里推荐使用xlsx或e…

    JavaScript 2023年5月27日
    00

  • 你真的了解BOM中的history对象吗

    当涉及到浏览器对象模型（BOM）时，常用的对象之一就是history对象。 这个对象允许我们访问正在打开并已经关闭的浏览器窗口的历史记录。 1. history对象简介 history对象是浏览器的窗口历史记录, 它是Window对象中的一个属性，可以使用window.history属性来访问它。history对象包含用户在浏览器中访问的所有页面的历史记录，…

    JavaScript 2023年6月11日
    00

  • js数组操作方法总结(必看篇)

    那么我将对js数组操作方法总结给出一个详细的攻略。 js数组操作方法总结(必看篇) JavaScript中的数组(Array)是一种特殊的对象，它可以存储任意类型的数据。数组提供了一系列的方法，用于对其进行操作。下面是一些常用的js数组操作方法： 1. 创建数组 用JavaScript创建数组的方法很简单，可以使用中括号[]，并用逗号隔开每个元素。示例如下：…

    JavaScript 2023年5月27日
    00

  • JavaScript原生对象之Number对象的属性和方法详解

    以下是关于“JavaScript原生对象之Number对象的属性和方法详解”的完整攻略。 Number对象的介绍 JavaScript的Number对象代表数字，可以进行数学运算。Number对象是JavaScript中的原始值之一。Number对象有很多属性和方法，可以帮助我们在编写JavaScript程序时，更加方便地操作数字。 Number对象的属性 …

    JavaScript 2023年5月27日
    00

  • JavaScript ES6中const、let与var的对比详解

    JavaScript ES6中const、let与var的对比详解 简介 在JavaScript中，有三种声明变量的关键字：var, let, const。很多初学者可能对它们的区别有所疑惑。本文将详细解释它们之间的区别。 var var 是在ES6之前使用最广泛的声明变量的关键字。它有如下特点： 它是全局作用域或函数作用域内的变量。 它可以被重复声明。 它…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部