标签: datatables
使用角度数据表动态更改列
我正在使用angular datatables，这是流行的 jquery 数据表库的一个角度化版本。
这是我的 html
<body ng-controller="TestCtrl">
<input type="button" ng-click="changeColumns()" value="Change Columns"/>
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</body>
这是我的 javascript
var module = angular.module('TestApp', ['datatables']);
module.controller('TestCtrl', [
'$scope',
'DTOptionsBuilder',
'DTColumnBuilder',
function($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions();
$scope.dtColumns = [
DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB')
];
$scope.changeColumns = function() {
$scope.dtColumns = [
DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB'),
DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'),
DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD')
];
};
}
]);
这就像我可以减少我的问题一样简单，但我仍然遇到相同的错误。当页面第一次加载时，我会按预期看到“ColumnA”和“ColumnB”。然后我单击表格上方的“更改列”按钮。
表格行消失了，原来的两列保留了下来，我在浏览器控制台中收到了这个错误。
Error: headerCells[i] is undefined
其次是令人讨厌的堆栈跟踪。我试图复制我之前链接的教程，但有一些细微的差别..我不明白为什么这个简单的例子对我不起作用。有人可以帮忙吗？
推荐指数
解决办法
查看次数
华丽的弹出窗口在数据表的第二页上不起作用
我创建了一个数据表并将图像列添加到数据表中。当我单击图像时，我想在弹出窗口中打开图像。它适用于数据表的第一页，但是当我传递到第二页时，它不起作用。此外，我将 alert() 用于测试第二页事件，并且 alert() 有效，但弹出窗口无效。
请检查我的片段： https : //jsfiddle.net/f08qdeq2/20/
我该如何解决这个问题，有什么想法吗？谢谢你
$(document).ready(function() {
var table = $('#datatable').dataTable({
aLengthMenu: [
[1, 2],
[1, 2]
],
iDisplayLength: 1
});
});
$(this.document).ready(function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
});
});
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
//$('.image-popup-no-margins').magnificPopup({
//Some Working code here
//});
})
推荐指数
解决办法
查看次数
如何按数据表中的隐藏列排序？
当我将 DataTables 应用于以下内容时：
<td class="years"><?php $years."-years" ?></td>
<td class="..." ...
... other <td> ...
我的表显示如下：
10-years ... ... ...
10-years ... ... ...
5-years ... ... ...
7-years ... ... ...
9-years ... ... ...
因为按字母顺序排列。我需要10-years出现在底部。要做到这一点，我添加<td class="hidden"><?php $years ?></td>右后<td class="years"><?php $years."-years" ?></td>并添加"order": [ 1, 'asc' ]到DataTable的初始化：
$(".table-rates").DataTable( {
"order": [ 1, 'asc' ]
});
之后它停止工作并开始在控制台中报告错误：“无法读取未定义的属性'mData'”。
有人可以解释我如何按数据表中的隐藏列排序吗？我在网上查了一下，但解决方案对我不起作用。更糟糕的是，语法极其混乱且难以遵循。任何帮助，将不胜感激。谢谢！
推荐指数
解决办法
查看次数
将 jquery 数据表中的金额列格式化为 $ 并将千位格式化为逗号
我正在使用 jquery 数据表，并且我有一列当前以十进制显示数量。我想在开头附加 $ 并将逗号放在千位。例如。当前显示为：1526 或 1013.7
所以它应该显示为 $1,526 和 $1,013.7
但最重要的是它不应该破坏排序功能。
我使用的代码如下
首先在页面加载：
var requestTable =
$('#tblCustomerGrid')
.DataTable({
data: data,
"columnDefs": [
{
"targets": 0,
"data": "clientId",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$compile(nTd)($scope);
},
"orderable": false,
"searchable": false,
"render": function (data, type, full, meta) {
var hyperLink = "<a href='#' ng-click='$event.preventDefault(); OpenClientInfo(" + data + ")'>Get Client Details</a>";
return hyperLink; //'<a href="Index/' + data + '">' + data + '</a>';
}
},
{ "type": "num", "targets": …推荐指数
解决办法
查看次数
dataTables 按一列搜索过滤器
我正在为我的网格视图使用 datatables.net。在搜索框中，它正在从所有列中搜索。但我想要像下面这样的场景。
我有 5 列，可以说 - 姓名、年龄、号码、地址、性别。我希望下拉列表中的所有这些选项以及当用户选择名称并在搜索框中输入文本时的下拉列表中，它只会在名称列中搜索。同样明智的是，如果用户从下拉列表中选择年龄，他只能在年龄列上进行搜索。
我看过很多例子，它们与我需要的不同。
推荐指数
解决办法
查看次数
如何在数据表中显示图像？
我想在我的数据表中显示一个图像。要在数据表中显示的数据是一个 json 数组数组，如下所示：
data : [["1", "John","image1.jpg"], ["2", "Jim", "image2.jpg"]]
所以在我的数据库中，我只有图像的名称，我不知道如何显示图像本身。
推荐指数
解决办法
查看次数
数据表:Bfrtip(按钮)和数字下拉列表之间的冲突
这是我的数据表实现代码:
<script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="../js/jquery-ui.js" ></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
var table = $('#TransactionsTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy',
'csv',
'excel'
],
"order": [[6, "desc"]],
"columnDefs": [
{
"visible": false,
"targets": [8]
}
]
} );
我对"dom:'Bfrtip'"这一行有疑问.如果我包含它,按钮显示,但允许您选择条目数(例如显示10,25,50,100个条目)的下拉列表消失.如果我删除该行,则下拉列表会返回,但按钮不会显示.为什么我需要选择？我怎么能两个都有？
Thanx任何帮助.
推荐指数
解决办法
查看次数
Laravel 5.4和Datatables插件：加载缓慢
我正在使用laravel 5.4和datatables插件。我正在使用分页，排序和在管理面板视图中进行搜索的数据表。但是该插件的表记录为7000条，速度非常慢。
在控制器中，我试图显示它们的记录：dd($data['noticias']);这很快，但是在具有数据表的视图中则需要几分钟！
我已经看到了一些答案，但是它们不适合我在做什么，他们使用Ajax，而我对ajax一无所知。如何解决缓慢的负载？谢谢。
控制器：
public function index()
{
$data['noticias'] = Noticia::with('langs')->get();
$data['sections'] = Section::all();
$data['positions'] = Position::all();
return view('panel.noticias.index', compact('data'));
}
视图：
<table id="listados" class="table table-striped" data-order='[[ 0, "desc" ]]' data-page-length='25'>
<thead>
<tr>
<th width="96">Fecha</th>
<th data-orderable='false' width="60">Hora</th>
<th>Título</th>
<th style="min-width:100px">Sección</th>
<th data-orderable='false' width="60">Fotos</th>
<th align="center" width="60">Ancla</th>
<th data-orderable='false' align="right" width="180">Acciones</th>
</tr>
</thead>
@foreach($data['noticias'] as $new)
<tr>
<td>{!! date('Y-m-d', strtotime($new->date)) !!}</td>
<td>{!! date('H:i', strtotime($new->time)) !!}</td>
<td>
@foreach($new->langs as $new_lang)
@include('panel.partials.list_name', ['value' => $new_lang, 'route' => 'noticias.edit', 'id' …推荐指数
解决办法
查看次数
数据表的总和逐行分组，并在每组末尾显示总和结果
我正在使用https://datatables.net/examples/advanced_init/row_grouping.html中的数据表行分组，并且工作正常。
我有以下情况：
现在，我想按图像中看到的分组末尾行中的每个分组abd显示结果计算总和（小计）。
在清单末尾，想要显示总金额的最后一行。如何做到这一点。
Js使用的代码是：
$(function() {
var table = $('#table').DataTable({
"columnDefs": [
{ "visible": false, "targets": 1 }
],
"order": [[ 1, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(1, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group" style="background-color:#F5F5F5;"><td colspan="3">'+group+'</td></tr>'
);
last = group;
}
} );
}
});
});
推荐指数
解决办法
查看次数
datatable add class a td render
我如何在此渲染器中添加一个类，询问是否启用或禁用了Office，如果此禁用应添加此类table-active。我在寻找类似的问题，但是没有一个起作用。
var table = $('#tbl_1').DataTable({
"order": [
[1, "asc"]
],
"destroy": true,
"ajax": {
"method": "POST",
"url": "JSON/Office.php"
},
"iDisplayLength": 15,
"columns": [ {
"data": "Office",
"width": "20%"
}, {
"data": "Status",
"searchable": false,
"sortable": false,
"aling": "center",
"render": function(data, type, row) {
var Status = row["Status"];
if (Status == 'FALSE') {
return '<button class="btn btn-sm btn-success active" onclick="enable_item(this)"title="Active">Active</button>';
} else {
return '<button class="btn btn-sm btn-danger disable" onclick="disable_item(this)" title="Disable"> Disable</button>';
}
}
}],
"dom": '<"dt-buttons"Bf><"clear">lirtp',
"paging": true, …推荐指数
解决办法
查看次数