datatable1.9 与datatable1.10取数据区别

标签：datatable

本人也是摸索datatable1.10的新用法，在下面的代码中如有错误，欢迎提出。。

1.10与1.9区别官方网址说明：http://www.datatables.net/upgrade/1.10

我们之间看代码。先看1.9的写法：

$(document).ready(function() {

var table, _qData;

        table = $(‘#example‘).dataTable({
            aoColumns : _tableCols,
            fnCreatedRow : xxxxx,    //函数名
        });
        loadList();

    });

    // table: 表格对象
    function loadList() {
        $.ajax({
            url : ‘/queryxxxx‘,
            data : _qData,
            dataType : ‘json‘,
            success : function(data) {
                table.fnClearTable();
                table.fnAddData(data.records);
            }
        });
    }

var _tableCols = [ {
        mData : null,
        bSortable : false,
        sClass : "center",
        sWidth : "30",
        mRender :xxxx  //函数名
    }, {
        mData : ‘groupCode‘,
        sWidth : "120",
        bSortable : true
    },  {
        mDataProp : "uuid",
        sClass : "center",
        bSortable : false,
        sWidth : "124",
        mRender : xxxx    //函数名
    } ];

现在看1.10的写法

$(document).ready(function() {

var table, _qData;

        table = $(‘#example‘).dataTable({
             "columns" : _tableCols,
            "createdRow" : xxxxx,    //函数名
        });
        loadList();

    });

    // table: 表格对象
    function loadList() {
        $.ajax({
            url : ‘/queryxxxx‘,
            data : _qData,
            dataType : ‘json‘,
            success : function(data) {
                  table.clear().draw();
                  table.rows.add(data.records).draw();
            }
        });
    }

var _tableCols = [ {
        data: null,
        orderable: false,
        className : "center",
        width : "30",
        render :xxxx  //函数名
    }, {
        data : ‘groupCode‘,
        width : "120",
        orderable: true
    },  {
        data: "uuid",
        className : "center",
        orderable: false,
        width : "124",
        render : xxxx    //函数名
    } ];

我们在看一种1.10的写法。此时我们将Ajax放在datatable里面

var table= $(‘#example‘).dataTable({
        "columns" : _tableCols,                        //_tableCols  写法同上
        createdRow : xxxxx,      //该函数用于行事件
         "ajax" : {
            "url" : "xxxxx",
            "type" : "POST",
            "dataSrc" : function(json) {
                    return json.records;
                        },
            "error" : function() {
                    var data = {
                        "data" : []
                        };
                    return data;
                              }
                }, });

该种方式也能给datatable赋值。。。。

用mDataProp绑定字段   跟mdata 一样的用法，这两个都是datatable 1.9及以前用法。1.10之后统一用data了。

1.9         -----》             1.10

mdata mdataprop  -->data
bSortable -->orderable
sClass  -->className
swidth  -->width
mRender -->render
fnCreatedRow   -->createdRow

datatables warning table id requested unknown parameter from the data source for row

（说明：The reason for these warnings are normally due to null values in the data source. The key to suppressing this warning is through the use of the sDefaultContent property.）

下面代码也能稍微解决：

1. "aoColumnDefs" : [ {
                    sDefaultContent : ‘‘,
                    aTargets : [ ‘_all‘ ]
                } ],

2.

add $.fn.dataTableExt.sErrMode = ‘throw‘ in the page where the plugin is used

搜索 datatable 1.10 ajax

datatable1.9 与datatable1.10取数据区别

标签：datatable

原文地址：http://blog.csdn.net/baicp3/article/details/40075115