Datatables :在drawCallBack之后使用Angular编译table HTML时，如何让分页工作？
在drawCallBack之后使用Angular编译table HTML时，可以通过以下步骤让分页工作：
- 确保你已经正确引入了Angular框架和Datatables插件。
- 在Angular组件中，首先导入必要的模块和服务，例如HttpClient模块和相关的服务。
- 在组件类中，定义一个变量来存储Datatables的配置选项，例如：
dtOptions: DataTables.Settings = {};- 在ngOnInit生命周期钩子函数中，初始化Datatables的配置选项，包括分页配置，例如：
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10
// 其他配置项...
};
}- 在HTML模板中，使用Datatables的table标签来渲染表格，并将配置选项绑定到table标签上，例如：
<table datatable [dtOptions]="dtOptions">
<!-- 表格内容 -->
</table>- 在组件类中，使用ViewChild装饰器来获取table元素的引用，例如：
@ViewChild(DataTableDirective, { static: false })
datatableElement: DataTableDirective;- 在需要重新编译table HTML的地方，调用Datatables的rerender方法来重新渲染表格，例如：
rerenderTable() {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
// 销毁表格实例
dtInstance.destroy();
// 重新渲染表格
this.datatableElement.dtTrigger.next();
});
}- 在drawCallBack回调函数中，调用rerenderTable方法来重新编译table HTML，例如：
drawCallback: (settings: any) => {
this.rerenderTable();
}通过以上步骤，你可以在drawCallBack之后使用Angular编译table HTML，并让分页工作正常。请注意，以上代码示例中的配置选项和方法调用可能需要根据具体情况进行调整。
关于Datatables的更多信息和使用示例，你可以参考腾讯云的相关产品文档：
相关·内容
我想让jQuery工具提示与DataTables jQuery插件一起工作，并且不知道如何附加它。
var myJBox = new jBox('Tooltip', {
closeOnMouseleave: true,
attach: '.tooltip',
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner:
浏览 1提问于2018-10-25得票数 0
回答已采纳
1回答
我有一个DataTable，我想在其中一个列中使用Tokenfield自动完成库。我的问题是，当DataTable由于分页而重绘时，Tokenfield无法工作。
初始化的DataTable / Tokenfield
App.datatables();
/* Initialize Datatables */
$('#memberTable').dataTable({
columnDefs: [{ searchable: false, targets: 3 }],
processing: true,
浏览 1提问于2016-03-09得票数 1
回答已采纳
我正在用拉拉做项目。我已经实现了DataTables，
blade.php
<table id="userprofaneword-table" class="table table-condensed table-hover">
<thead>
<tr>
<th>{{ trans('labels.backend.report.profaneword.table.id') }}</th>
<th>{{ t
浏览 3提问于2018-09-04得票数 1
回答已采纳
2回答
我有一个HTML表：
<table id="PeopleTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pop</th>
</tr>
</thead>
<tbody>
<tr><td>0&
浏览 5提问于2017-01-25得票数 0
回答已采纳
1回答
我有一组应该显示在JQuery数据表中的数据，其中包含筛选和滚动的选项，并且不会丢失列标题。到目前为止，所有功能都有效，但列标题有问题。如果您单击该链接并选中run example，您将看到问题。列标题在左侧，而tbody居中。我已经尝试修复这个问题并更改我的HTML代码，删除了一些JQuery表属性，但仍然没有成功。如果有人知道如何解决这个问题，或者如果我的代码有任何问题，请告诉我。下面是一个例子：
$('#btnGet').on('click', function() {
buildTable();
});
var dataTable;
func
浏览 0提问于2018-11-06得票数 0
我正在使用DataTables，如果没有记录或正在显示的记录总数，我需要始终显示分页栏。当前，如果没有记录并且显示总记录数，分页栏将隐藏。在这两种情况下都不需要分页，但是是否有一个属性在这两种情况下都有分页栏。我的JQuery如下所示
JQuery
var table = $('#esignTable').DataTable({"sDom": '<"top"flp>rt<"bottom"i><"clear">',
pagingType: 'in
浏览 9提问于2017-06-30得票数 1
回答已采纳
1回答
jQuery数据表不工作
、、、
我使用Angularjs作为前端，spring mvc作为我的应用程序的后台。我正在使用数据表来显示记录。我面临的问题是datatables有时工作，有时不工作。
在执行编辑或删除或任何动态操作后，datatable将失去其形状，如分页、过滤、搜索。即使会有数据，但它显示没有记录，但仍然显示没有分页的记录。
我在脚本中尝试了draw()和reload方法，但似乎都不起作用。在html页面中，我加载css和js文件的顺序如下所示
<html lang="en" data-ng-app="adminApp">
<head>
&
浏览 1提问于2017-09-06得票数 2
我正在尝试从DataTables (版本1.10+)向分页按钮添加工具提示(标题)。我想我可以使用这段代码(使用正确的id/class标识符)：
$('.class').attr('title', 'your new title');
我就是想不出哪个类才是按钮的正确类。我发现所有的按钮都有这样的类：
.paginate_button
但这并不管用。任何想法都是非常值得欣赏的想法！
浏览 1提问于2016-09-16得票数 0
回答已采纳
1回答
我有一个用angular-datatables显示的非常大的数据集，并且正在尝试使用我的angular组件中的datatables插件启用服务器端分页。该API调用是对我正在编写的ASP.NET核心服务的调用。
我似乎找不到太多关于如何做这件事的文档，而且我对datatables插件还比较陌生。
我的API GET声明：
public async Task<IActionResult> GetOperations(
int pageIndex = 0, int pageSize = 50, string query = null)
它使用pageIndex和pageSize来
浏览 1提问于2018-06-28得票数 2
2回答
如何添加日期范围筛选器。
就像从-到。
我有工作定期搜索和分页等等。但是我不知道怎么做日期范围过滤器。
我使用的是Datatables 1.10.11版本。
我的代码：
var oTable;
function callFilesTable($sPaginationType, $bPaginate, $bFilter, $iDisplayLength, $fnSortcol, $fnSortdir){
$.extend($.fn.dataTableExt.oStdClasses, {
sSortAsc : 'header headerSortDown
浏览 4提问于2017-01-02得票数 5
回答已采纳
2回答
使用闪亮和DT，我希望为datatable中的特定单元格触发一个事件。假设我希望第一列在悬停时变成红色。在创建表时，我添加了一个回调，该回调在第一列的td元素上注册了一个悬停事件。
library(shiny)
library(DT)
ui <- fluidPage(
tags$head(tags$style(HTML(".red { background-color: red; }"))),
DT::dataTableOutput("iris")
)
server <- function(input, output) {
outpu
浏览 0提问于2018-11-03得票数 1
回答已采纳
3回答
我正在将Datatables添加到我的Rails应用程序中。我有它的大部分工作，但我被困在一个CSS / jQuery问题。我有一个定义如下的行单元格：
content_tag(:abbr, "#{record.od} mm", data: { container: 'body', toggle: 'tooltip', placement: 'bottom', html: 'true' }, title: 'test' )
它会渲染：
<abbr data-container="bod
浏览 1提问于2016-08-31得票数 9
回答已采纳
2回答
我有一个包含最基本的初始化代码的dataTable。但是，我需要为出现在表格底部的分页分配一个自定义分页css类(我想分配Twitter引导分页类)。我该怎么做呢？
下面是我的代码：
$(document).ready(function() {
/* Build the DataTable with third column using our custom sort functions */
$('#list_table').dataTable({"sPaginationT
浏览 0提问于2014-02-03得票数 11
我正在尝试用jquery datatable添加jquery延迟加载。但是，当数据进入分页页面时，问题就出现了，jquery延迟加载不能处理其他页面图像
@foreach($products as $product)
<tr>
<td>{{$i++}}</td>
<td width="10%">
浏览 0提问于2020-03-10得票数 0
1回答
我发现是一个非常酷的Angular Datatable库，它向表中添加了分页、搜索等功能。我可以很好地处理预定义的表头，但是我需要对没有预定义表头的表进行分页。
我尝试在他们的官方文档中遵循示例，但我自己做了一些更改，但它给出了这个错误：
DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7
这是我尝试的方法：
在我的html文件中
<table datatable=
浏览 0提问于2016-10-17得票数 1
1回答
我有一个表，当用户从下拉菜单中选择一个选项时，数据将在其中返回，但是附加的数据不会获得它们的x可编辑功能。
我想知道如何将x可编辑添加到表中的附加数据中。
代码
view
$(document).ready(function() {
$('.username').editable({
url : this.url,
pk : this.id,
type : 'text',
validate:function(value){
浏览 3提问于2020-03-12得票数 0
回答已采纳
我的守则：
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
浏览 3提问于2015-09-21得票数 0
回答已采纳
我已经导入了必要的DataTables css和js文件。
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="/j
浏览 0提问于2015-12-05得票数 0
3回答
我正在使用Datatables分页来显示我的记录。我的问题是，当我使用表的“下一步”按钮到表的末尾时，这个按钮就会被禁用。我不想让这个按钮看起来残疾。我试过这样做：
$j('#buttonID').attr("disabled", "disabled");
$j('#buttonID').disable(true);
$j('#buttonID').prop('disabled', false);
但这不管用。有人能帮我举个例子吗？
浏览 4提问于2017-02-14得票数 1
回答已采纳
我想在我的引导数据表中使用一个select2选择框。我需要使用，但它不工作，我想知道为什么。
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
浏览 0提问于2017-07-05得票数 6
回答已采纳
我有一个包含来自DT包的数据表的R/Shiny应用程序。 在这个线程render dropdown for single column in DT shiny之后，我已经能够将操作按钮嵌入到我的数据表的列中，这将触发一组相应的观察者。 但是，当对datatable进行分页时，我的操作按钮将仅对第一页上的按钮正确工作。后续页面上的按钮不起作用。即使我使用列排序对数据进行重新排序，这种情况仍然存在，因为在初始呈现时页面2+上的任何按钮都将不起作用，即使它们被重新排序到页面1上。 我认为问题出在回调参数是如何使用javascript (不幸的是我无法理解)来正确呈现操作按钮的。有没有人能建议如何让
浏览 27提问于2020-09-29得票数 0
回答已采纳
jquery.dataTables.min.js: DataTables 1.10.12
在加载数据()之后，我需要访问表行。我不能这样做，因为json在函数中是undefined。尽管我的表是加载的，我看到了所有的数据。此外，函数中还有settings数据。
为什么会这样呢？我忘了什么选择了吗？
我的代码：
var data_table = task_submit_table.DataTable({
"initComplete": function (settings, json) {
console.log(json);
},
"
浏览 1提问于2016-11-17得票数 0
回答已采纳
2回答
当某些值不是“错误”时，我尝试隐藏表中的按钮。
它在第一页上工作非常好，但是由于分页，第二页上没有隐藏按钮。
$(function() {
$('#table1').each(function() {
var Cell = $(this).find('td:eq(2)');
debugger;
if (Cell.text() !== 'error' ) {
$(this).find('button').hide();
}
});
});
浏览 4提问于2017-08-03得票数 0
回答已采纳
1回答
我正在使用datatables在angular中创建一个表。我使用了作用域中的值，并将该值与接收到的数据进行了比较。
"columns": [{ data: null, render: function ( data, type, row ) {
var roleid =angular.element('#TextkeysController').scope().currentRole;
return '<p ng-show="'+data.id+' == '+roleid+'" class="
浏览 6提问于2016-07-29得票数 1
我是angular 7的新手，想要在angular 7中实现datatable。首先，我已经在admin模块中创建了一个admin模块，我已经创建了一个组件作为manage-categories，我想在这个组件中实现datatable，下面是我的代码 angular.json "styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"
浏览 20提问于2019-02-18得票数 0
我正在使用来表示我的表。我有一个列，它的记录为活动或非活动。现在我想显示列的数量，它的值是active & inactive，在它显示72个条目中的1到10个条目之后。
我的桌子是这样的
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('#example').dataTable({
"bLengthChange": true,
浏览 0提问于2017-04-14得票数 0
我有一个运行在上的表，列中有两个值的单元格。我已经检查了docs ()、.footer()和footerCallback的示例，尝试获取列的两个值的和，并获得显示在页脚上的结果。但当细胞有两个值时，我就不能让它工作了。我花了两天的时间试着把钱记在脚上，但没有得到积极的结果。
示例：
每日
200 / 400
100 / 1200
700 / 300
1000 / 1900 (总计)
$(document).ready(function () {
var tableDataSet = [
{
"name" : "John",
浏览 5提问于2016-11-17得票数 0
回答已采纳
我开始学习Angular，我想使用Angular-DataTables来显示我的数据(后端部分工作正常，我正在调用REST API，并且我的数据被检索没有任何问题)。 问题是，当我访问包含该表的页面时，它显示“No data available in table”，但当我单击“刷新我的数据出现”时，我导航到另一个页面并返回到包含该表的页面，直到我再次刷新，才会显示任何数据。 下面是我所做的： app.module.ts import { DataTablesModule } from 'angular-datatables';
.
.
.
.
imports: [
B
浏览 26提问于2020-08-16得票数 0
1回答
我使用的是jquery - datatables插件。它允许从服务器加载数据和分页。 我有很多数据，我不允许在客户端加载所有的数据。我不想在每次单击分页按钮时都从服务器请求数据，因为这没有任何意义。 我的问题是:有没有一种方法可以每隔N个页面从服务器加载数据？例如，它将前10页加载到客户端。如果用户点击从1到10的页面-数据是从客户端加载的。如果用户点击第11页，12- plugin会向服务器端请求加载下10个页面的另一部分数据。 附注:我记得datatables有这个功能，但我现在找不到了
浏览 22提问于2020-12-03得票数 0
1回答
我在使用angular材质开发的表格上使用分页。我使用mat-paginator对表进行了分页，如下所示：https://material.angular.io/components/paginator/overview 它在我的表上使用一个分页器就可以很好地工作。 my_app.ts import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angu
浏览 27提问于2019-04-08得票数 0
我在上表中使用，我对每页的记录都有选择器。
<div id="NewsTable_length" class="dataTables_length">
<label><select size="1" name="NewsTable_length" aria-controls="NewsTable">
<option value="25" selected="selected">25</option>
<option v
浏览 4提问于2013-10-09得票数 2
回答已采纳
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2
};
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2
};
this.allservice.getUrl(this.listUserUrl)
.subscribe(data=>{
this.listUser=data.res
浏览 31提问于2018-08-17得票数 0
2回答
我一直在尝试使用Angular-ui-sortable来重新排序Angular-datatables中的行。未发生重新排序。但是，如果我尝试使用普通的表，它工作得很好。如果可能，请帮助我(任何输入或方向)。
对于普通表，它可以工作- //jsfiddle.net/pmspraju/La4vqb8b/对于angular-datatable，它不是-
Plunker
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.datatabl
浏览 3提问于2015-10-02得票数 0
1回答
角2 DataTable
、、、、
我正在尝试使用jQuery2应用程序DataTable，我已经成功地安装了它，但仍然无法工作，我不知道为什么！
以下是我的component.ts文件代码：
import {Component, ElementRef, OnInit} from '@angular/core';
import {Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
const $ = require('jquery');
const dt =
浏览 3提问于2017-06-21得票数 0
1回答
我有一个datatable，当用户请求新数据时，它会被重新绘制。例如，它可以显示所有成员，然后当用户单击按钮时，表将被重新绘制以仅显示过期的成员。
我使用x-editable来编辑datatable的单元格中出现的字段。我让它在初始绘制时工作得很好，但我不能在重绘表格时让x-editable出现。
以下是我尝试过的方法：
1)：使用draw.dt事件-
$('#memberTable').on( 'draw.dt', function () {
showEditable();
// continue with other t
浏览 2提问于2016-03-27得票数 1
我正在使用Angular的Datatable，并在如下模板中使用它： <manager-table [data]="items" [columns]="columns" [loading]="isLoading" ></manager-table> 在table.component.ts中，我有 @Component({
selector: "manager-table",
templateUrl: "./table.component.html",
styleUr
浏览 15提问于2020-07-02得票数 0
我有一个通过接收包含所有数据的数组从laravel创建的表： <table id="my_table" class="table table-striped table-hover table-bordered mytable" width="100%">
<thead>
<tr>
<th>Action</th>
<th>Cluster</th>
浏览 11提问于2019-09-02得票数 0
1回答
数据更新动态汇总
、、、
我正在根据一些条件(现金/卡)计算页面加载的总数，这是很好的。现在，我需要在搜索时动态地改变它们。
搜索将使用默认的搜索输入和数据报警器执行。搜索似乎很好，而变化的总数却没有。
我的大部分代码都在工作，下面是我的代码。
任何帮助都是非常感谢的。
html
$(document).ready(function() {
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
$('#records').DataT
浏览 0提问于2019-03-29得票数 1
回答已采纳
1回答
我正在使用Angular框架8.x版本来开发我的项目。我安装了the datatables package来增强表格功能。我跟随the online documentation使用了这个包，它工作得很好。但是，我发现它不支持固定标题行选项。那么，我该如何解决这个问题呢？我尝试安装以下软件包，但这些都没有帮助： datatables.net-fixedheader-dt datatables.net-fixedheader 组件源代码如下： import {CallTree} from "../CallTree";
import {CallTreeService} from &
浏览 23提问于2019-08-30得票数 0
如何在angular 5中捕获分页按钮上/下一页中的单击事件。不幸的是，我在jquery中得到了代码。
jquery代码：
var table = $('#example').DataTable({
drawCallback: function(){
$('.paginate_button.next', this.api().table().container())
.on('click', function(){
alert('next');
});
}
});
但我需要
浏览 0提问于2018-09-19得票数 0
My场景：嘿im支持一个系统，该系统从数据库中检索数据，然后将数据传递给vue.js，然后将其显示在jQuery DataTabes中。
我遇到的问题是，当DataTables最初初始化时，数据似乎保存在我初始化的表中。当我检索新信息时，它不会更新现有的数据，并且会破坏表。
另外，从请求返回的数据正是我所需要的
我尝试过的：
使用$('#table').DataTable.destroy()销毁表，然后重新初始化它:要么表示不能重新初始化数据，要么像往常一样只显示旧数据。
使用新ID重新初始化表，并将当前表id更改为计算新ID: not将表显示为普通表，而不是datatable
浏览 5提问于2016-08-12得票数 2
2回答
当用户单击datatable分页编号时，我使用的数据对象是当用户单击datatable分页编号时，要触发带有警报框的on事件。
下面是我尝试过的代码，但它适用于next按钮。
$(document).ready(function (){
var table = $('#example').DataTable({
drawCallback: function(){
$('.paginate_button.next', this.api().table().container())
.on('cl
浏览 2提问于2017-07-06得票数 1
回答已采纳
1回答
我希望在我的ASP.NET web项目中以的形式创建带有分页、排序和搜索的Jquery
在我的引导表中，如下所示。我没有收到任何错误，但没有给我显示分页字段，说教字段。没给我看我的桌子。我认为这不是youtube视频的表格形式，但是我应该如何才能拥有和他一样的功能呢？
<!DOCTYPE html>
<html>
<head>
<title>Countries</title>
<meta charset="utf-8" />
<script src="S
浏览 1提问于2017-05-15得票数 0
回答已采纳
我要添加excel，复制，pdf，打印按钮的角度js。但我在数据表中显示按钮时出错。数据表工作正常，但当我添加按钮代码时，datatable没有工作错误。
未明误差：$injector:modulerr
样式和js引用
<script src="~/angularjs/jquery.js"></script>
<script src="~/angularjs/jquery.dataTables.js"></script>
<script src="~/angularjs/a
浏览 0提问于2019-01-03得票数 1
我有一张桌子
<table class="display" id="tbl">
</table>
我使用javascript创建了一个字符串数据，然后使用
$('#tbl').append(data);
之后，我使用
$('#tbl').DataTable();
若要使该表成为datatable，请执行以下操作。
表格的所有html都是正确的。它在表格上做了一些格式化，但它看起来不同，并且没有分页或显示一定数量条目的能力。
我在控制台中看到以下错误：
jQuery.Defer
浏览 1提问于2018-11-14得票数 0
我正在使用Javascript从Firebase数据库中提取数据。我把它们列在桌子上。我需要分页，因为这些数据非常多。我没有将下面链接中的分页方法应用到我的脚本中，这个分页工作。
JS分页网址：
我的问题是数据来自数据库，所以这个脚本没有看到我的数据，也没有分页和用index.html编写。“表中没有数据”
这是因为这个分页函数在脚本第一次加载时立即运行。
函数：
$(document).ready(function() {
$('#userlist-table').DataTable();
} );
当我将从数据库加载的数据以HTML的形式放入“表”中时，它也非
浏览 1提问于2019-11-06得票数 0
回答已采纳
我正在使用DataTables ()。
我正在使用下面的代码，但是DataTables似乎没有初始化。我可以将<script>移到文档的顶部，然后它就可以工作了，但我理解将它们放在文档的底部会更好。
当我将这些移动到文档的底部时，有没有什么原因导致它不工作。我认为我正在以正确的顺序加载它们，等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-C
浏览 0提问于2014-08-14得票数 1
我在角度6上工作，我想应用角度数据表，但它给出了下面的错误。如何解决以下错误并应用角度数据表。 出现以下错误。 ERROR TypeError: $(...).DataTable is not a function
at eval (angular-datatables.umd.js:46)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (ng_zone.ts:264)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.ru
浏览 17提问于2019-01-17得票数 0
我想应用DataTables示例()来进行表分页。但是我不能理解演示显示的内容。
有什么建议如何使用DataTables吗？
<html>
...
<table id='example'>
...
<table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginati
浏览 0提问于2014-01-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
