1

我有以下jQuery 数据表

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "sAjaxSource" : "/myServer/getAllWidgets",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "widgetName",
            "value" : wName
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "widgetType"
        },
        {
            "mDataProp" : "widgetValue"
        },
        {
            "mDataProp" : "widgetFactor"
        }
    ]
});

这成功地访问了我的 Web 服务器,并在我的 UI 上/myServer/getAllWidgets填充了一个 3 列数据表(列标题为:TypeValueFactor )。到现在为止还挺好。

问题是,widgets支持此 dataTable 的 MySQL 表经常更改,我想在我的 UI 中添加一个按钮,这样当用户单击该按钮时,dataTable 会刷新,这意味着/myServer/getAllWidgets再次运行并显示正确的记录/值用户。

在过去的一天里,我试图让它工作,但我尝试的一切都失败了。就个人而言,我不在乎我如何获得这个“刷新”功能,也不在乎解决方案是否根本不涉及fnReloadAjax(这是我一直在努力的工作)。我只需要一些有用的东西:

<div id="refresh-button-div">
    <input type="button" id="refreshButton" onclick="refreshData"/>
</div>

// In JS
$("#refreshButton").click(function() {
    // ???
});

提前致谢。

4

2 回答 2

2

您可以使用该fnDraw函数重绘表格。试试这个:

var $dataTable = $("#my-datatable").dataTable({ /* setup */ });

$("#refreshButton").click(function() {
    $dataTable.fnDraw();
});

阅读文档中fnDraw条目。

于 2012-12-06T14:48:21.700 回答
1

我使用fnReloadAjax();ajax 源重新加载表数据

$("#refreshButton").click(function() {
    oTable.fnReloadAjax();
});

只是改变

$("#my-datatable").dataTable( {...

进入

oTable = $("#my-datatable").dataTable( {...//make oTable a global var in your js

您可以从此处获取此数据表插件源fnReloadAjax,将其放入某个 js 文件中并将其包含在您的页面中...

于 2012-12-06T15:36:36.760 回答