zoukankan      html  css  js  c++  java
  • 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请求刷新数据。 

  • 相关阅读:
    前端开发中一些好用的软件包。
    LeetCode 26 删除排序数组中的重复项
    算法 主定理
    算法学习计划继续三四个月
    Web Api
    DOM viewport
    CSS OM
    DOM Range Api
    DOM 操作 2
    DOM Event
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7418804.html
Copyright © 2011-2022 走看看