jquery.datatable插件如何不自动加载数据?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.datatable插件如何不自动加载数据?相关的知识,希望对你有一定的参考价值。
参考技术A $(window).load(function ()$('#managertable').dataTable(
"bServerSide": true,
"bAutoWidth": true,
"bStateSave": false, //保存状态到cookie ******很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性设置为true就可避免了
"bPaginate": true, // 是否使用分页
"bProcessing": true, //是否显示正在处理的提示
"bLengthChange": false, //是否启用设置每页显示记录数
"iDisplayLength": 20, //默认每页显示的记录数
"bFilter": true, //是否使用搜索
"bJQueryUI": true, //页面风格使用jQuery.
// "sScrollY": 200,//竖向滚动条 tbody区域的高度
"sScrollX": "100%", //横向滚动条
"sScrollXInner": "100%",
"bScrollCollapse": true,
"aoColumns": [ "sTitle": "Id" ,
"sTitle": "Name" ,
"sTitle": "Permission" ,
"sTitle": "Remarks"],
"sPaginationType": "full_numbers", //分页样式
"bAutoWidth": true, //列的宽度会根据table的宽度自适应
"bSort": false, //是否使用排序
"aaSorting": [[0, "desc"]],
"sAjaxSource": "/action/admin/index.ashx?paraname=admingroupmanager&sub_detail_id=" + $.cookies.get('sub_detail_id')
);
);
下面是ajaxsource响应:
["Id":1,"Name":"管理员组","Permission":"100,110,120,130,200,210,220,300,310,320,330,400,410,420,430,500,510,520,600,610,620,630,631,632,633,634,640,700,710,720,730,740,800,810,820,830","Remarks":""]
绑定不上:var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ); //这里的json是有响应的数据
for ( var i=0, iLen=aData.length ; i<iLen ; i++ )
这里aData获取到的是:undefined; 这里解决了,
现在出现这个问题:
Showing 1 to NaN of NaN entries (filtered from NaN total entries)
DataTables warning (table id = 'managertable'): Requested unknown parameter '0' from the data source for row 0本回答被提问者和网友采纳 参考技术B 数据不正确吧!
如何使用jQuery datatable插件
我真的是新的jQuery和MVC3,我从http://datatables.net/下载了jquery datatable插件,我对如何实现表格感到困惑。我只是想展示桌子,我不在乎它是什么,我只想先把它放在视图上。任何帮助或建议将不胜感激。
在主视图中,我不确切知道我需要或不需要的脚本:
<h2>About</h2>
@*<script src="../../Scripts/DataTables.js" type="text/javascript"></script>*@
<script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.MetaData.js" type="text/javascript"></script>
@*<script src="../../Scripts/model.column.js" type="text/javascript"></script>
<script src="../../Scripts/model.search.js" type="text/javascript"></script>
<script src="../../Scripts/model.row.js" type="text/javascript"></script>
<script src="../../Scripts/model.ext.js" type="text/javascript"></script>*@
@*<script src="../../Scripts/model.defaults.js" type="text/javascript"></script>
<script src="../../Scripts/model.defaults.columns.js" type="text/javascript"> </script>*@
<link href="../../Content/jquery.dataTables.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$('#usersGrid').dataTable({
aoData: [{}]
});
</script>
<script type="text/jscript">
$('#usersGrid').dataTable({
aoData: [{}]
});
</script>
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
我一直认为DataTables网站有很好的例子,都有示例代码。没有必要的逐步指导,但更基本的例子非常简单。
无论如何,以最简单的形式,让DataTables工作所需的只是一个有效的jQuery对象(当然还有DataTables源)。上面代码中的一个问题是您的表的ID为table_id
,但您尝试在ID为usersGrid
的表上初始化dataTable。此外,您应该将初始化代码放在$(document).ready()
中
我把this quick demo放在一起让你看。它没有所有花哨的按钮和东西,但基本功能就在那里 - 你可以对列进行排序等。注意表的ID如何对应于jQuery选择器。除此之外,您所要做的就是调用.dataTable()
方法:
$(document).ready(function() {
$('#table_id').dataTable();
});
使用Simple为jquery DataTable提供以下两个脚本
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
使用Css添加表格样式
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
运行jquery函数以显示数据表
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {$('#TABLE_ID').dataTable({'iDisplayLength': 2,//Set Row Per Page
"bFilter": false,//Remove Search
"bPaginate" : false,//Remove Pagination
"bInfo": false,//Remove Page Info
"bLengthChange":false,//Show per Page Dropdown Remove
"columnDefs": [ { "targets": 0, "orderable": false } ],//Remove Colum Orderable(Here Col 0 Remove)
"aoColumns": [{ "asSorting": [] },{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc" ] },{ "asSorting": [ "desc" ] },null],//Set Colum Order By ASC Or DSC
"sPaginationType": "full_numbers"//Full Pagination
});
});
</script>
创建表格以应用jquery数据表。
<table id="TABLE_ID"><thead><tr><th>Name</th><th>Position</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td></tr><tr><td>Garrett Winters</td><td>Accountant</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td></tr></tbody></table>
这里创建表必须用户<thead>
和<tbody>
Tag在表中应用jQuery。
以下示例可能满足您的要求,显示相关的js和css文件。在这里我也使用jQuery主题,使用第三个css文件。你可以从datatables下载前两个css文件,从jQuery官方网站本身下载第三个css文件。
<head>
<link href="../css/table_sort_page.css" rel="stylesheet" type="text/css" />
<link href="../css/table_sort_jui.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/cupertino/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../css/ui/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
<script src="../js/jquery.dataTables.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table_id").dataTable({
"bJQueryUI": true,
"aoColumns": [{ "bSortable": true }, { "bSortable": true }]
});
});
</script>
</head>
<body>
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</body>
你在Enhancing-HTML-tables-using-a-JQuery-DataTables-pl有一些描述。但是,如果您想要实时示例,最好使用datatables站点。
约翰
我正在使用jquery datatable服务器端。
$('#sample-data-table').DataTable({
"destroy": true,
"processing": false,
"serverSide": true,
"searching": true,
"oLanguage": {
"sEmptyTable": "No client available."
},
"lengthMenu": [
[10, 20, 50, -1],
[10, 20, 50, "All"]
],
"order": [],
})
它将按照我从OrderByDescending从服务器端获取的列表进行排序。但是当我添加新记录并再次初始化数据表时,最后插入的记录不会出现在列表的顶部。
以上是关于jquery.datatable插件如何不自动加载数据?的主要内容,如果未能解决你的问题,请参考以下文章
jquery datatable插件aadata格式不显示表格
如何在不同 jquery ui 选项卡中的 gridviews 中使用 jquery Datatable 插件?
我们如何在 jQuery Datatable 调用结果中启动另一个 jQuery 插件而不是页面就绪功能?