datatable1.9 与datatable1.10以数据差异

我还探讨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

版权声明：本文博客原创文章。博客，未经同意，不得转载。