`
dfwang
  • 浏览: 95210 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

DataTables Ajax 回调函数

    博客分类:
  • j2ee
阅读更多
<!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>  

分享到:
评论

相关推荐

    表格 demo datatables 回调

    回调函数是Datatables的核心特性之一,允许开发者自定义数据处理逻辑,例如在数据加载前后进行操作,或者在用户与表格交互时执行特定功能。 在"表格 demo datatables 回调"中,"回调"可能指的是Datatables的事件回...

    datatables使用ajax实例

    此外,datatables的Ajax配置非常灵活,可以设置多种参数来定制请求,比如`type`(GET或POST)、`dataType`(json、xml等)、`data`(附加到请求的数据)以及`success`和`error`回调函数,以便在请求成功或失败时执行...

    [简单]DataTables简单示例

    6. 回调函数:DataTables支持多种回调函数,如`fnDrawCallback`,可以在数据加载后执行自定义操作。 7. 插件与扩展:DataTables有许多插件和扩展,如Buttons用于导出数据,Responsive用于响应式布局,FixedHeader...

    datatables案例

    7. 用户交互:Datatables 提供了丰富的事件监听和回调函数,使得开发者能够根据用户的操作执行相应的逻辑,如行选择后的处理。 接下来,我们探讨如何实现这些功能: 1. 安装和引用 Datatables:首先要在 HTML 页面...

    PHP+Ajax+bootstrap+dataTables无刷新分页表格插件

    同时,dataTables还提供了事件监听和自定义回调函数,允许开发者在用户与表格交互时执行额外的逻辑,比如在点击某行数据时触发详情查看或编辑操作。 总的来说,"PHP+Ajax+bootstrap+dataTables无刷新分页表格插件...

    datatables1.10.15示例代码

    6. **自定义事件和回调函数** 可以监听DataTables的各种事件,如`init`, `xhr`, `draw`等,并在事件触发时执行自定义代码。例如: ```javascript $('#example').on( 'draw.dt', function () { alert( 'Table re-...

    datatables刷新插件fnReloadAjax

    `fnReloadAjax`插件还支持参数,例如可以传入一个回调函数,以便在数据加载完成后执行特定操作: ```javascript table.fnReloadAjax( function () { alert('数据已刷新'); } ); ``` 此外,如果你的表格使用了分页...

    DataTables(二) —— 行分组信息展开与折叠的功能实现

    我们可以使用`createdRow`回调函数来自定义行的HTML,添加展开/折叠的图标。同时,需要监听`draw`事件来更新图标状态。 7. **自定义展开与折叠的样式** 使用CSS可以定制展开/折叠按钮的样式,例如设置图标颜色、...

    DataTablesAjax

    5. **Ajax回调函数**:DataTables提供了多个Ajax回调函数,例如`success`、`error`和`complete`,这些函数允许在数据加载的不同阶段执行自定义操作。例如,你可以在`success`函数中处理接收到的数据,将其绑定到表格...

    基于dataTables组件的图书管理(前端简要设计)

    基本使用方法是调用`bootbox.alert()`, `bootbox.confirm()`或`bootbox.prompt()`,并传入相应的消息和回调函数。 **3. 数据来源 - JSON文件** 数据通常以JSON(JavaScript Object Notation)格式存储,这是一种轻...

    django使用ajax 与后台进行交互

    在Ajax请求成功回调函数`success`中,前端接收到JSON响应后,根据数据更新模态框的内容。这可能包括显示属性值,或者动态加载其他相关信息。 总结,通过以上步骤,我们实现了Django中使用Ajax与后台交互,实现点击...

    03 datatables分页查询1

    通过 `columns.render` 属性可以指定一个回调函数来处理数据,如: ```javascript columns: [ { data: 'created_at', render: function(data, type, row) { return moment(data).format('YYYY-MM-DD HH:mm'); } }...

    DataTables使用

    2. **回调函数**:如 `initComplete` 在初始化完成后执行,`drawCallback` 在每次数据重绘后执行,可以用来添加自定义行为。 3. **语言设置**:`language` 参数允许设置表格的语言选项,提供国际化支持。 4. **...

    jQuery Datatables.zip

    5. **事件监听**:利用提供的API,可以监听并响应用户的操作,如排序、分页后的回调函数。 **三、API与插件** jQuery DataTables提供了丰富的API,允许开发者在运行时对表格进行操作,如`fnDraw()`用于重新绘制...

    DataTables高级初始化.rar

    6. **回调函数(Callback functions)**: DataTables提供了多个生命周期回调函数,如`init`, `draw`, `preDraw`, `xhr`等,用于在特定事件发生时执行自定义代码。 7. **国际化(Internationalization)**: ...

    Laravel开发-laravel-datatables

    10. **自定义回调函数**:允许开发者编写自定义的JavaScript回调函数,实现更多定制化功能。 在使用laravel-datatables时,通常需要以下几个步骤: 1. **安装扩展**:通过Composer进行安装,命令为`composer ...

    struts2对AJAX的支持

    其中,`action`属性指定要调用的Struts2 Action,`indicator`用于显示加载指示器,`oncomplete`是回调函数,`targets`定义了响应更新的目标元素。 4. **处理AJAX响应**: 在后台,你需要创建一个Action来处理AJAX...

    jQuery表格插件datatables用法汇总

    DataTables提供了丰富的事件和回调函数,允许在特定的生命周期点进行操作,比如Ajax回调函数可以用来修改返回数据的格式,或者在表格初始化完成时执行自定义的操作。 7. 语言本地化和界面定制。DataTables支持本地...

    N多AJAX插件,值得收藏

    5. **jQuery的AJAX事件**:jQuery提供了一些与AJAX请求相关的事件,如'ajaxStart'、'ajaxSend'、'ajaxSuccess'、'ajaxError'等,允许在AJAX请求的不同阶段执行回调函数。 6. **Promise API**:jQuery的AJAX方法返回...

    使用vue和datatables进行表格的服务器端分页实例代码

    `"ajax"`属性定义了如何获取数据,这里通过回调函数发送一个POST请求到服务器,传递分页参数(如页面大小和页码)。 2. **服务器请求**: `postJson()`函数向服务器发送请求,参数包括API路径、请求参数(例如`{'...

Global site tag (gtag.js) - Google Analytics