dataTable


google code:http://atued-admin.googlecode.com/svn/trunk/

####example 1: aaData数据为二维数组

var $table = $('#dyntable'), oTable;

oTable = $table.dataTable({
    "sDom": 'rt<"dataTables_footer"lip>',
    "bServerSide": true,
    "sAjaxSource": "data/source.json",
    "aoColumns": [
        {
            "sTitle": "<input type='checkbox' value='' > ",
            "sClass": "center",
            "fnRender": function(obj){
                return '<input type="checkbox" value="'+ obj.aData[ obj.iDataColumn ] +'" > '
            }
        },
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "center" },
        {
            "sTitle": "Grade",
            "sClass": "center",
            "fnRender": function(obj) {
                var sReturn = obj.aData[ obj.iDataColumn ];
                if ( sReturn == "A" ) {
                    sReturn = "<b>A</b>";
                }
                return sReturn;
            }
        },
        {
            "sTitle": "操作",
            "sClass": "center",
            "sDefaultContent" : '<a class="editJs">编辑</a> | <a class="delJs">删除</a>'
        }
    ]
});

####example 2: aaData数据格式为JSON

"aoColumns": [
    {
        "sTitle": "<input type='checkbox' value='' > ",
        "mData": "id",
        "sClass": "center",
        "mRender": function( data, type, full ){
            return '<input type="checkbox" value="'+ data +'" > '
        },
        "bSortable": false
    },
    { "sTitle": "Engine", "mData": "Engine"},
    { "sTitle": "Browser", "mData": "Browser" },
    { "sTitle": "Platform", "mData": "Platform" },
    { "sTitle": "Version", "sClass": "center", "mData": "Version" },
    {
        "sTitle": "Grade",
        "mData": "Grade",
        "sClass": "center",
        "mRender": function( data ) {
            var sReturn = data;
            if ( sReturn == "A" ) {
                sReturn = "<b>A</b>";
            }
            return sReturn;
        }
    },
    {
        "sTitle": "操作",
        "sClass": "center",
        "sDefaultContent" : '<a class="editJs">编辑</a> | <a class="delJs">删除</a>'
    }
]

###API

####sAjaxSource 异步数据文件路径、服务器端提供数据接口。

服务端数据格式:

{
    "sEcho": 1, //第1页  --当前第几页
    "iTotalRecords": 57, //总记录数
    "iTotalDisplayRecords": 57, //显示的记录数
	//数据格式为二维数组,对应aoColumns的头部字段
    "aaData": [
        [1,"Gecko", "Mozilla 1.1", "Win 95+ / OSX.1+", "1.1", "A"],
        [2,"Gecko", "Mozilla 1.2", "Win 95+ / OSX.1+", "1.2", "A"],
        [3,"Gecko", "Mozilla 1.3", "Win 95+ / OSX.1+", "1.3", "A"],
        [4,"Gecko", "Mozilla 1.4", "Win 95+ / OSX.1+", "1.4", "A"],
        [5,"Gecko", "Mozilla 1.5", "Win 95+ / OSX.1+", "1.5", "A"],
        [6,"Gecko", "Mozilla 1.6", "Win 95+ / OSX.1+", "1.6", "A"],
        [7,"Gecko", "Mozilla 1.7", "Win 98+ / OSX.1+", "1.7", "A"],
        [8,"Gecko", "Mozilla 1.8", "Win 98+ / OSX.1+", "1.8", "A"],
        [9,"Gecko", "Seamonkey 1.1", "Win 98+ / OSX.2+", "1.8", "A"],
        [10,"Gecko", "Epiphany 2.20", "Gnome", "1.8", "A"]
    ]
}

数据服务端支持(.NET) > csharp-datatables-parser > mvc.jquery.datatables

####搜索

####响应式 > datatables-responsive

####文档 1. “sAjaxDataProp”: “data”,数据参数,默认为aaData 2. “sServerMethod”: “POST”,数据获取方式,默认为get 3. “bProcessing”: true,显示数据正在加载中 4. “bServerSide”: true,异步回去数据 5. “sAjaxSource”: “scripts/server_processing.php”,获取数据地址 6. “asStripeClasses”:[ “odd”, “even”],