首页 > 代码库 > datatable1.9 与datatable1.10取数据区别

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 = http://www.mamicode.com/{
                        "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取数据区别