标签: datatables
table.columns不是datatable.js中的函数
<script>
jQuery(document).ready(function () {
$('#sample_3 tfoot th').each(function () {
var title = $('#sample_3 thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#sample_3').dataTable();
// Apply the filter
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
</script>
我得到table.columns不是函数js错误,缺少什么我不明白.
推荐指数
解决办法
查看次数
如何使用datatable.js在tbody中使用rowspan和colspan？
每当我使用时<td colspan="x"></td>,我都会收到以下错误:
未捕获的TypeError:无法设置未定义的属性'_DT_CellIndex'(...)
演示
$("table").DataTable({});<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<table style="width:50%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">3 4</td>
<td colspan="3">4 5 6</td>
</tr>
</tbody>
</table>它在没有DataTables.js的情况下正常工作,但是当我们将这个结构与datatable.js一起使用时,它无法正常工作.我们需要上面的表结构.有谁知道我们如何使用这个表结构datatable.js？
推荐指数
解决办法
查看次数
如何让jQuery DataTables对隐藏值进行排序,但搜索显示的值？
我有一个简单的DataTables网格,其中包含日期列.我在JSON数据集中提供了两个日期值,一个用于显示,另一个专门设计,以便DataTables可以对其进行排序.我的Web应用程序允许用户选择一堆不同的日期格式,因此需要灵活.
这是DataTables从Web服务器获取的JSON数据sAjaxSource.
{
Reports : [
{ Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } },
{ Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } },
]
}
很容易告诉DataTables根据Date.SortValue属性进行排序,并Display通过使用使该属性对用户可见fnRender().所以这让我的目标得到了一半.
var dataTableConfig = {
sAjaxSource: "/getreports",
sAjaxDataProp: "Reports",
aoColumns: [
{ mDataProp: "User" },
{ mDataProp: "Date.Sort",
bSortable: true,
sName: "Date",
bUseRendered: false,
fnRender: function (oObj) {
return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].sName].Display;
}
}
]
};
这是我的问题.我想允许用户根据显示的值输入过滤器(使用DataTables提供的内置过滤器输入),但他们不能.
例如.如果用户输入"EST",它们将得到零结果,因为数据表基于指定的值过滤而mDataProp …
推荐指数
解决办法
查看次数
响应式Bootstrap数据表不会在正确的位置折叠列
我正在使用Datatables.net最新版本,带有数据表和引导程序.我想我的问题是:Datatables Responsive Bootstrap用于检测溢出,因为它显然不是父宽度.
这是我的结果:
这是一个非常直接的问题.如果我减少窗口的宽度1个像素,列最终会崩溃.如果我然后展开它,它将返回到此状态.我想防止父引导程序面板溢出.我已经删除了bootstrap网格div(row/col-xs-12等)来消除potitial问题,但是一旦解决了这个问题(或者我更好地理解了这个问题),我打算也使用bootstrap网格系统.
这是一个完美复制问题的plunkr(折叠运行视图):http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR？p = preview
<!DOCTYPE html>
<html>
<head>
<title>Tables - PixelAdmin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
<style>
body {
font-size: 140%;
}
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</style>
</head>
<body style="padding-top: 40px;">
<div class="panel panel-primary" style="margin: 51px; padding: 0;">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body" style="padding: 0;">
<div style="width: 100%; border: 1px solid red;">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th> …推荐指数
解决办法
查看次数
使用ASP.NET WebForms的jQuery DataTables服务器端处理
问题:
- 使用ASP.NET WebForms的jQuery DataTables服务器端处理.
解:
- Darin Dimitrov使用一个页面和排序的例子回答了这个问题,但没有做任何搜索.这是我对他的工作的基本**修改,以便在他的例子上进行搜索工作:
public class Data : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Paging parameters:
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
// Sorting parameters
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
var iSortDir = context.Request["sSortDir_0"];
// Search parameters
var sSearch = context.Request["sSearch"];
// Fetch the data from a repository (in my case in-memory)
var persons = Person.GetPersons();
// Define an order function based on the iSortCol parameter
Func<Person, object> order = person => iSortCol == …推荐指数
解决办法
查看次数
如何将列宽设置为jQuery数据表？
我有一个jQuery数据表(以红色标出),但是会发生的是表跳出我为div设置的宽度(650 px).
这是屏幕截图:
这是我的代码:
<script type="text/javascript">
var ratesandcharges1;
$(document).ready(function() {
/* Init the table*/
$("#ratesandcharges1").dataTable({
"bRetrieve": false,
"bFilter": false,
"bSortClasses": false,
"bLengthChange": false,
"bPaginate": false,
"bInfo": false,
"bJQueryUI": true,
"bAutoWidth": false,
"aaSorting": [[2, "desc"]],
"aoColumns": [
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '10%' } …推荐指数
解决办法
查看次数
使用导出工具时,显示条目下拉列表消失
使用导出工具时,显示条目下拉列表消失
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip', // if you remove this line you will see the show entries dropdown
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
});
推荐指数
解决办法
查看次数
JQuery DataTables - 行分组,求和,可折叠,导出
我一直在使用JQuery DataTables.这是我第一次使用行分组.我找到了一个我想要开始的好例子.- 分组
- 如何
<td>在分组行中添加额外内容？如果我想在该分组行上显示分组工资的总和,该怎么办？现在,看起来您只能显示该组的名称.
附加信息
我将从Ajax源返回数据.
更新1
因此,我构建了一个包含行分组的表,并找到了如何总结列的示例.我正在将该值插入<td>该组行中.我现在需要的是如何将总和数量分解为组而不是整个列的总和.我需要帮助.
"drawCallback": function (settings) {
var api = this.api(), data;
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
//Calculates the total of the column
var total = api
.column(5) //the salary column
.data()
.reduce(function (a, b) {
return a + b;
}, 0);
//Groups the Office column
api.column(2, { page: 'current' }).data().each(function (group, i) {
if (last …推荐指数
解决办法
查看次数
jQuery DataTable - 以预期的方式隐藏行
我们目前正在开发基于Web的CRM.除了令人沮丧的问题外,该项目进展顺利.
我们正在为应用程序中的几乎每个可排序表使用DataTable jQuery插件.这是一个活动事件列表.
如您所见,第三列表示事件的类型(票证,变更请求,服务请求等)
用户请求放置在上一个表顶部的过滤器框来过滤事件类型.例如,如果选择"仅限票证",则将隐藏其他所有类型.到目前为止,一切正常.
为此,每行都有一个表示事件类型的CSS类.
- 第1行:class ="ticket"
- 第2行:class ="changeRequest"
当筛选框值更改时,将执行以下javascript代码
$('table.sortable').each(function() {
for (var i = 0; i < rows.length; i++) {
if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
}
});
哪里
- vClass =表示事件类型的CSS类
- rows =所有dataTable行,来自"$(SomeDatatable).dataTable().fnGetNodes();"
- $('table.sortable')=所有dataTables
现在,系好安全带(法国班轮).当您隐式隐藏行时,dataTable仍会对其进行计数.这是一个神话般的结果.
正如所解释的那样,主要问题是:我应该如何告诉dataTable我想隐藏行而不永远删除它们？DataTable已经有了一个过滤器框,但我需要它与类型过滤器盒一起独立工作(不在图像中).
有没有办法添加第二个过滤器？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数