<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico"
href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table_jui.css";
@import "css/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript" language="javascript"
src="js/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="js/jquery.jeditable.js"></script>
<script type="text/javascript" language="javascript"
src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
function getDataSet() {
var aDataSet;
$.ajaxSetup( {
async : false//设置get、post同步
});
$.get("register/RegisterState", {
test : 12
}, function(data, status) {
if (status == "success") {
data = eval("(" + data + ")");
aDataSet = data;
} else {
alert("wrong");
}
});
return aDataSet;
}
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aaData" : getDataSet(),//从服务端获取数据添加到表格内容
"bJQueryUI" : true,//使用DataTables提供的Themes,界面比较美观
"sPaginationType" : "full_numbers"//分页
});
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('editable_ajax.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
"callback" : function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata" : function(value, settings) {
return {
"row_id" : this.parentNode.getAttribute('id'),
"column" : oTable.fnGetPosition(this)[2]
};
},
"height" : "14px"
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="demo_jui">
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="example">
<thead>
<tr>
<th>
No.
</th>
<th>
UserId
</th>
<th>
UserName
</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
分享到:
相关推荐
回调函数是Datatables的核心特性之一,允许开发者自定义数据处理逻辑,例如在数据加载前后进行操作,或者在用户与表格交互时执行特定功能。 在"表格 demo datatables 回调"中,"回调"可能指的是Datatables的事件回...
此外,datatables的Ajax配置非常灵活,可以设置多种参数来定制请求,比如`type`(GET或POST)、`dataType`(json、xml等)、`data`(附加到请求的数据)以及`success`和`error`回调函数,以便在请求成功或失败时执行...
6. 回调函数:DataTables支持多种回调函数,如`fnDrawCallback`,可以在数据加载后执行自定义操作。 7. 插件与扩展:DataTables有许多插件和扩展,如Buttons用于导出数据,Responsive用于响应式布局,FixedHeader...
7. 用户交互:Datatables 提供了丰富的事件监听和回调函数,使得开发者能够根据用户的操作执行相应的逻辑,如行选择后的处理。 接下来,我们探讨如何实现这些功能: 1. 安装和引用 Datatables:首先要在 HTML 页面...
同时,dataTables还提供了事件监听和自定义回调函数,允许开发者在用户与表格交互时执行额外的逻辑,比如在点击某行数据时触发详情查看或编辑操作。 总的来说,"PHP+Ajax+bootstrap+dataTables无刷新分页表格插件...
6. **自定义事件和回调函数** 可以监听DataTables的各种事件,如`init`, `xhr`, `draw`等,并在事件触发时执行自定义代码。例如: ```javascript $('#example').on( 'draw.dt', function () { alert( 'Table re-...
`fnReloadAjax`插件还支持参数,例如可以传入一个回调函数,以便在数据加载完成后执行特定操作: ```javascript table.fnReloadAjax( function () { alert('数据已刷新'); } ); ``` 此外,如果你的表格使用了分页...
我们可以使用`createdRow`回调函数来自定义行的HTML,添加展开/折叠的图标。同时,需要监听`draw`事件来更新图标状态。 7. **自定义展开与折叠的样式** 使用CSS可以定制展开/折叠按钮的样式,例如设置图标颜色、...
5. **Ajax回调函数**:DataTables提供了多个Ajax回调函数,例如`success`、`error`和`complete`,这些函数允许在数据加载的不同阶段执行自定义操作。例如,你可以在`success`函数中处理接收到的数据,将其绑定到表格...
基本使用方法是调用`bootbox.alert()`, `bootbox.confirm()`或`bootbox.prompt()`,并传入相应的消息和回调函数。 **3. 数据来源 - JSON文件** 数据通常以JSON(JavaScript Object Notation)格式存储,这是一种轻...
在Ajax请求成功回调函数`success`中,前端接收到JSON响应后,根据数据更新模态框的内容。这可能包括显示属性值,或者动态加载其他相关信息。 总结,通过以上步骤,我们实现了Django中使用Ajax与后台交互,实现点击...
通过 `columns.render` 属性可以指定一个回调函数来处理数据,如: ```javascript columns: [ { data: 'created_at', render: function(data, type, row) { return moment(data).format('YYYY-MM-DD HH:mm'); } }...
2. **回调函数**:如 `initComplete` 在初始化完成后执行,`drawCallback` 在每次数据重绘后执行,可以用来添加自定义行为。 3. **语言设置**:`language` 参数允许设置表格的语言选项,提供国际化支持。 4. **...
5. **事件监听**:利用提供的API,可以监听并响应用户的操作,如排序、分页后的回调函数。 **三、API与插件** jQuery DataTables提供了丰富的API,允许开发者在运行时对表格进行操作,如`fnDraw()`用于重新绘制...
6. **回调函数(Callback functions)**: DataTables提供了多个生命周期回调函数,如`init`, `draw`, `preDraw`, `xhr`等,用于在特定事件发生时执行自定义代码。 7. **国际化(Internationalization)**: ...
10. **自定义回调函数**:允许开发者编写自定义的JavaScript回调函数,实现更多定制化功能。 在使用laravel-datatables时,通常需要以下几个步骤: 1. **安装扩展**:通过Composer进行安装,命令为`composer ...
其中,`action`属性指定要调用的Struts2 Action,`indicator`用于显示加载指示器,`oncomplete`是回调函数,`targets`定义了响应更新的目标元素。 4. **处理AJAX响应**: 在后台,你需要创建一个Action来处理AJAX...
DataTables提供了丰富的事件和回调函数,允许在特定的生命周期点进行操作,比如Ajax回调函数可以用来修改返回数据的格式,或者在表格初始化完成时执行自定义的操作。 7. 语言本地化和界面定制。DataTables支持本地...
5. **jQuery的AJAX事件**:jQuery提供了一些与AJAX请求相关的事件,如'ajaxStart'、'ajaxSend'、'ajaxSuccess'、'ajaxError'等,允许在AJAX请求的不同阶段执行回调函数。 6. **Promise API**:jQuery的AJAX方法返回...
`"ajax"`属性定义了如何获取数据,这里通过回调函数发送一个POST请求到服务器,传递分页参数(如页面大小和页码)。 2. **服务器请求**: `postJson()`函数向服务器发送请求,参数包括API路径、请求参数(例如`{'...