小编Gyr*_*com的帖子
在Jquery数据表1.10.10中延迟加载表行？
我正在使用jquery datatable 1.10.10.是否有任何延迟加载数据表中的行数据的选项.例如,如果数据表包含50行记录,如果我将数据表滚动到最后,它会请求另外50行数据并附加到已存在的数据表？
推荐指数
解决办法
查看次数
输入框datepicker在jQuery DataTables的所有页面中都不起作用
我有jsp页面有jQuery DataTables,其中包含超过20个页面,我在数据表td标签中使用文本框,显示datepicker即签入/签出日期.
在第一页上它完美地工作,但在其他页面上,datepicker类不适用.这是我使用的以下代码.
HTML代码
<table id="tableBookingByBooker">
<thead class="btn-default">
<tr>
<th>checkInDate</th>
<th>checkInDate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="checkInDate${data[0]}" />
</td>
<td>
<input id="Text1" />
</td>
</tr>
</tbody>
</table>
JS代码:
$('input[id^=checkInDate]').each(function (index, element) {
var checkOutDate = (new Date($('#checkOutDate' + $(this).attr('id').substring(11)).val()));
checkOutDate.setDate(checkOutDate.getDate() - 1);
$(this).datepicker({
dateFormat: 'mm/dd/yy',
maxDate: checkOutDate,
});
});
$('input[id^=checkOutDate]').each(function (index, element) {
var checkInDate = (new Date($('#checkInDate' + $(this).attr('id').substring(12)).val()));
checkInDate.setDate(checkInDate.getDate() + 1);
$(this).datepicker({
dateFormat: 'mm/dd/yy',
minDate: checkInDate,
});
});
输入框(checkIn/checkout)Datepicker在数据表的第一页成功运行,但其他页面的日期选择器不起作用.
我尝试了分页事件并将js代码放入函数单击但它无法正常工作
推荐指数
解决办法
查看次数
工具提示不适用于数据表子行
Bootstrap Tooltip不适用于使用jQuery DataTables的子行.
随着fnDrawCallback它工作在正常行,但对孩子的行没有影响,我不知道如何使它工作.
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
}
请参阅子行和fnDrawCallback以供参考.
HTML示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style> …推荐指数
解决办法
查看次数
DataTables如何确定列类型
我有一个由jQuery DataTables增强的动态表,它显示一个类似于这个例子的自定义对象.
JSON:
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": {
"display": "SomeString",
"timestamp": 1303686000
},
"office": "Edinburgh",
"extn": "5421"
},
// ... skipped ...
]}
JavaScript的:
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
不同之处在于我动态构建列配置,因为列可以按任何顺序排列,其他列可以在列表中添加或删除.对于这个例子(我的情况非常相似),问题是由于某种原因,该timestamp属性被排序为String而不是作为数字排序. …
推荐指数
解决办法
查看次数
自定义数据源属性dataSrc和分页问题
我正在使用jQuery DataTables和服务器端处理模式.但我面临着数据表的问题,我在Datatables文档中搜索了所有内容,但找不到我的答案.
所以问题是我从服务器获得响应,就像这样:
正如您在此JSON响应中所看到的,JSON所需的data.data数据表是在数据表中设置此数据源,有一个属性是Custom Data Property,它工作正常并显示行.现在问题是数据表没有考虑JSON的分页参数,这就是它显示的原因:
请注意,我无法从服务器端更改JSON响应.
更新: 这是js调用脚本:
$(document).ready(function () {
$("#example").dataTable({
"ajax": {
url: app.getApiUrlWithAccessToken('lead/get_all'),
dataSrc: function(json){
return json.data.data;
}
},
"lengthMenu": [1,2,5,10,15],
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "title" },
{ "data": "email" },
{ "data": "city" },
{ "data": "status" }
],
"processing": true,
"serverSide": true
});
});
推荐指数
解决办法
查看次数
DataTables ajax.reload在保持分页时会跳转到页面底部
我正在使用带有ajax源数据的jQuery DataTables.我必须每30秒保持数据最新而不刷新页面,ajax.reload()这是我需要的功能.
我把ajax.reload()一个setInterval功能放进去.
一切正常(如果你留在第1页).但是当你在第2页或第3页上冲浪时setInterval,什么时候被触发,它会让你回到第1页.
所以......在这个网址上找文档:http://datatables.net/reference/api/ajax.reload()
如果我将"false"作为第二个参数传递它保持当前的分页位置,并且在重新加载时不重置分页.答对了!
有用!但是......我有一个新问题,试图整天解决,现在我被卡住了.这就是我发布这个问题的原因.
它保持分页,但如果你不在第1页,那么每次ajax.reload()触发时,页面都会滚动(直接跳转)到底部.
它非常不友好,不可读,无法使用.我不知道为什么页面滚动到最后底部.
我发布了一个链接到我在页面上使用的简单数据表js. 的jsfiddle
var url = table.data('url');
var filterType = table.data('filtertype');
var options = {
"ajax": {
"url": url,
"type": "GET",
"data": function (d) {
d.contact_type = filterType
// this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all.
}
},
"columns": [
{"data": "html_is_company"},
{"data": "name"},
{"data": "html_type_label"}, …推荐指数
解决办法
查看次数
angularjs数据表按钮插件
我正在使用angularjs datatable并尝试在此页面中使用按钮插件https://l-lin.github.io/angular-datatables/#/withButtons
.withButtons([
'columnsToggle',
'colvis',
'copy',
'pdf',
'excel',
{
text: 'Some button',
key: '1',
action: function (e, dt, node, config) {
alert('Button activated');
}
}
]);
我得到Unknown按钮类型:'columnsToggle'和'colvis',但当我从代码中删除'columnsToggle'和'colvis'时它运行没有任何问题,但除了自定义按钮外不显示其他按钮
{
text: 'Some button',
key: '1',
action: function (e, dt, node, config) {
alert('Button activated');
}
}
复制,pdf,excel没有出现,任何人都可以帮我解决问题吗？
推荐指数
解决办法
查看次数
Ajax数据源(对象):TypeError:f未定义
我正在开发我的ASP.Net Web应用程序,我必须使用Ajax数据源填充HTML表,我正在使用jQuery DataTables插件.
HTML代码:
<table class="table table-striped table-hover table-bordered display" id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th>Prctice Group Risk No
</th>
<th>Practice_Group
</th>
<th>Risk_Category
</th>
</tr>
</thead>
</table>
JavaScript代码:
$('#example').DataTable({
"ajax": {
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url":"index.aspx/Risky"
},
"columns": [
{ "data": "Prctice_Group_Risk_No" },
{ "data": "Practice_Group" },
{ "data": "Risk_Category" }]
});
这是我的Web方法我正在调用获取对象列表的JSON响应
[WebMethod]
[ScriptMethod]
public static string Risky()
{
return JsonConvert.SerializeObject(riskList);
}
来自服务器的JSON响应:
d:"[{"Prctice_Group_Risk_No":1,"Practice_Group":"M&A","Risk_Category":"Conflicts of Interests"},{"Prctice_Group_Risk_No":2,"Practice_Group":"abc","Risk_Category":"Client Care and Communication"}]
Jquery DataTables官方网站http://www.datatables.net/examples/ajax/objects.html中描述的JSON响应对我来说似乎很好 .
但是表中没有填充任何数据,我在Firebug控制台中收到以下错误
TypeError:f未定义
推荐指数
解决办法
查看次数
jQuery Datatable Editor没有初始化
我目前在页面中使用数据表.但是,当我尝试添加datatable编辑器插件时,我在控制台中收到错误:
TypeError: $.fn.dataTable.Editor is not a constructor
我所做的只是在创建表的jquery中添加以下行:
var table = $('#sampledt').DataTable();
var editor = new $.fn.dataTable.Editor(table);
new $.fn.dataTable.Buttons( table, [
{
extend: "edit", editor: editor
},
{
extend: "remove", editor: editor
}
]);
table.buttons().container()
.appendTo( $('col-sm-6:eq(0)', table.table().container() ));
这些是页面中的.js和.css:
jquery-1.12.0.min.js
bootstrap.min.js
jquery.dataTables.min.js
dataTables.bootstrap.min.js
dataTables.buttons.min.js
buttons.bootstrap.min.js
dataTables.select.min.js
dataTables.editor.min.js
bootstrap.min.css
dataTables.bootstrap.min.css
buttons.bootstrap.min.css
select.bootstrap.min.css
editor.bootstrap.min.css
我错过了什么吗？提前致谢.
更新:
我添加了var editor = new $ .fn.dataTable.Editor(table); 删除了未定义"编辑器"的控制台错误.相反,发生了一个新错误:$ .fn.dataTable.Editor不是构造函数.
更新:
我从页面中删除了bootstrap.min.js.控制台错误"TypeError:a.Editor is undefined"已被删除.
推荐指数
解决办法
查看次数
即使禁用排序,也会显示第一列的排序箭头
我需要使用DataTable pligin在表中添加"全选"复选框.我没有为此找到标准方法,我手动使用添加.好的,但是如果我尝试使用本地化('语言'属性),我的"全选"复选框就会消失.我尝试修复是通过在DataTable库中添加我的代码,但这是不好的方法.
<table id="devices" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th style="padding:8px; text-align:center;">
<input type='checkbox' class='minimal check-all' id='check-all-device' name='check-all-device'></input>
</th>
<th>{% trans "STATUS" %}</th>
<th>{% trans "DEVICE NAME" %}</th>
<th>{% trans "ACTIONS" %}</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>{% trans "STATUS" %}</th>
<th>{% trans "DEVICE NAME" %}</th>
<th>{% trans "ACTIONS" %}</th>
<th></th>
</tr>
</tfoot>
<tbody id="devices-table-rows">
{% for device in object_list %}
{% include "device_add_row.html" %}
{% endfor %}
</tbody>
</table>
在javascript上添加选择处理程序:
devicesTable = $('#devices').DataTable({
// disable sorting …推荐指数
解决办法
查看次数
标签 统计
datatables ×10
jquery ×9
javascript ×5
json ×2
ajax ×1
angularjs ×1
asp.net ×1
datepicker ×1
html ×1
icheck ×1
jsp ×1
webmethod ×1
yii2 ×1