DataTables Ajax 回调函数

花花的技术

2011-09-08

<!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 ajax 回调函数 javascript