bootstrap datatable 数据刷新问题

在项目中，页面初始化的时候，通过通过向后台请求数据，页面初始化完之后，datatable是有数据的，当我点击页面的搜索按钮（按照时间过滤数据），datatable的数据要能重新刷新或者重载；这一点，我的实现是直接从数据库中查询，目前的数据量比较小，还没必要用到缓存，此时，由于初做web，遇到了好多问题，诸如datatable cannot initial 等等问题，
datatable初始化的代码：

$(document).ready(function() {

    $('#example1').DataTable({

        "bPaginage": false,

        "sPaginationType": "full_numbers",

        "oLanguage": {

            "sLengthMenu": "每页显示 _MENU_ 条",

            "sZeroRecords": "没有找到符合条件的数据",

            "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",

            "sInfoEmpty": "没有记录",

            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",

            "sSearch": "搜索",

            "sProcessing": "数据加载中...",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "上一页",

                "sNext": "下一页",

                "sLast": "尾页"

            }

        },

        "aoColumns": [

            {

                "sDefaultContent": "",

                fnRender: function (obj) {

                    return "<input type='checkbox'  name='checkbox1'/>"

                }

            },

            {"mData": "column_name"},

            {"mData": "data_type"},

            {"mData": "column_comment"}

        ]

    });

    $('#example2').DataTable({

        "bProcessing":false,

        "bFilter" : true,

        "bPaginate": true,

        "sPaginationType": "full_numbers",

        "bSort": true,

        "oLanguage": {

            "sLengthMenu": "每页显示 _MENU_ 条",

            "sZeroRecords": "没有找到符合条件的数据",

            "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",

            "sInfoEmpty": "没有记录",

            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",

            "sSearch": "搜索",

            "sProcessing": "数据加载中...",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "上一页",

                "sNext": "下一页",

                "sLast": "尾页"

            }

        },

        "aoColumns": [

            {"mData": "column_name"},

            {

                "sDefaultContent": "",

                fnRender: function (obj) {

                    return "<input type='checkbox'  name='checkbox2'/>"

                }

            },

            {

                "sDefaultContent": "",

                fnRender: function (obj) {

                    return "<button class='btn'  " +

                            "style='margin-top: -2px;margin-bottom: -18px;padding-top: 3px;height: 24px!important;" +

                            "font-size: 8px;color: snow' " +

                            "onclick=dl(this)>删除</button>"

                }

            }

        ]

    });

});

var table2 = $('#example2').dataTable();

oSettings = table2.fnSettings();

$.getJSON("transform.action?data="+data.join(","), null, function( json )

{

    for (var i=0; i<json.aaData.length; i++)

    {

        table2.oApi._fnAddData(oSettings, json.aaData[i]);

    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

    table2.fnDraw();

});

//也许你还可能用到这几个方法：

table = $('#e

xample1').dataTable();

oSettings = table.fnSettings();

table.fnClearTable(this);

一个简单的方法…
$(‘YourDataTableID’).dataTable()._fnAjaxUpdate();
它将通过与非常简单的ajax请求刷新数据。

巴特西

bootstrap datatable 数据刷新问题

最新文章

热门文章