一、DataTables表格插件的简介

DataTables是一个jQuery的表格插件。它具有以下特点：

• 自动分页处理
• 即时表格数据过滤
• 数据排序以及数据类型自动检测
• 自动处理列宽度
• 可通过CSS定制样式
• 支持隐藏列
• 易用
• 可扩展性和灵活性
• 国际化
• 动态创建表格
• 免费的

二、DataTables的使用

fnCookieCallback：还没有使用过

$(document).ready(function () {

$('#example').dataTable({

    "fnCookieCallback": function (sName, oData, sExpires, sPath) {

        // Customise oData or sName or whatever else here

        return sName + "=" + JSON.stringify(oData) + "; expires=" + sExpires + "; path=" + sPath;

    }

});

});

fnCreatedRow：顾名思义，创建行得时候的回调函数

$(document).ready(function () {

$('#example').dataTable({

    "fnCreatedRow": function (nRow, aData, iDataIndex) {

        // 为a的话字体加粗

        if (aData\[4\] == "A") {

            $('td:eq(4)', nRow).html('<b>A</b>');

        }

    }

});

});

fnDrawCallback：draw画 ，这个应该是重绘的回调函数

$(document).ready(function () {

$('#example').dataTable({

    "fnDrawCallback": function (oSettings) {

        alert('DataTables 重绘了');

    }

});

});

fnFooterCallback：底部的回调函数，这个可以用来做总计之类的功能

$(document).ready(function() {

$('#example').dataTable({  
    "fnFooterCallback": function(nFoot, aData, iStart, iEnd, aiDisplay) {

        nFoot.getElementsByTagName('th')\[0\].innerHTML = "Starting index is " + iStart;

    }  
});

});

fnFormatNumber：顾名思义，格式化数字的显示方式

$(document).ready(function () {

$('#example').dataTable({  
    "fnFormatNumber": function (iIn) {  
        if (iIn < 1000) {  
            return iIn;  
        } else {  
            var s = (iIn + ""),  
            a = s.split(""), out = "",  
            iLen = s.length;  
            for (var i = 0; i < iLen; i++) {  
                if (i % 3 === 0 && i !== 0) {  
                    out = "'" + out;  
                }  
                out = a\[iLen - i - 1\] + out;  
            }  
        }  
        return out;  
    }  
});  

});

fnHeaderCallback：表头的回调函数

$(document).ready(function () {

$('#example').dataTable({

    "fnHeaderCallback": function (nHead, aData, iStart, iEnd, aiDisplay) {

        nHead.getElementsByTagName('th')\[0\].innerHTML = "Displaying " + (iEnd - iStart) + " records";

    }

});

})

fnInfoCallback：datatables信息的回调函数

$('#example').dataTable({

"fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {

    return iStart + " to " + iEnd;

}

});

fnInitComplete：datatables初始化完毕后会调用这个方法

$(document).ready(function () {

$('#example').dataTable({  
    "fnInitComplete": function (oSettings, json) {

        alert('DataTables has finished its initialisation.');

    }  
});

});

fnPreDrawCallback：每一次绘datatables时候调用的方法

$(document).ready(function () {

$('#example').dataTable({

    "fnPreDrawCallback": function (oSettings) {

        if ($('#test').val() == 1) {

            return false;

        }

    }

});

});

fnRowCallback：行的回调函数

$(document).ready(function () {

$('#example').dataTable({

    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

        // Bold the grade for all 'A' grade browsers

        if (aData\[4\] == "A") {

            $('td:eq(4)', nRow).html('<b>A</b>');

        }

    }

});

});

fnServerData：这个是结合服务器模式的回调函数，用来处理服务器返回过来的数据

// POST data to server

$(document).ready(function () {

$('#example').dataTable({

    "bProcessing": true,

    "bServerSide": true,

    "sAjaxSource": "xhr.php",

    "fnServerData": function (sSource, aoData, fnCallback, oSettings) {

        oSettings.jqXHR = $.ajax({

            "dataType": 'json',

            "type": "POST",

            "url": sSource,

            "data": aoData,

            "success": fnCallback

        });

    }

});

});

fnServerParams：向服务器传额外的参数

$(document).ready(function () {

$('#example').dataTable({

    "bProcessing": true,

    "bServerSide": true,

    "sAjaxSource": "scripts/server\_processing.php",

    "fnServerParams": function (aoData) {

        aoData.push({ "name": "more\_data", "value": "my\_value" });

    }

});

});

fnStateLoad：读取状态的回调函数

$(document).ready(function () {

$('#example').dataTable({

    "bStateSave": true,

    "fnStateLoad": function (oSettings) {

        var o;

        // Send an Ajax request to the server to get the data. Note that

        // this is a synchronous request.

        $.ajax({

            "url": "/state\_load",

            "async": false,

            "dataType": "json",

            "success": function (json) {

                o = json;

            }

        });

        return o;

    }

});

});

fnStateLoadParams：和上面的不知道什么区别，没用过

// Remove a saved filter, so filtering is never loaded

$(document).ready(function () {

$('#example').dataTable({

    "bStateSave": true,

    "fnStateLoadParams": function (oSettings, oData) {

        oData.oSearch.sSearch = "";

    }

});

});

// Disallow state loading by returning false

$(document).ready(function () {

$('#example').dataTable({

    "bStateSave": true,

    "fnStateLoadParams": function (oSettings, oData) {

        return false;

    }

});

});

fnStateLoaded：又是这个，加了ed 不知道意思没用过

// Show an alert with the filtering value that was saved

$(document).ready(function () {

$('#example').dataTable({

    "bStateSave": true,

    "fnStateLoaded": function (oSettings, oData) {

        alert('Saved filter was: ' + oData.oSearch.sSearch);

    }

});

});

fnStateSave：状态储存

$(document).ready( function() {

$('#example').dataTable({  
    "bStateSave": true,

    "fnStateSave": function(oSettings, oData) {

// Send an Ajax request to the server with the state object

        $.ajax({  
            "url": "/state\_save",

            "data": oData,

            "dataType": "json",

            "method": "POST"

            "success": function () {  
        }

    });  
};

} );

} );

fnStateSaveParams ：状态储存参数，没用过，不明白

// Remove a saved filter, so filtering is never saved

$(document).ready(function () {

$('#example').dataTable({

    "bStateSave": true,

    "fnStateSaveParams": function (oSettings, oData) {

        oData.oSearch.sSearch = "";

    }

});

});