Question

我有一个我用

初始化的数据表

 function getData()
        {
               $.ajax({
                method: 'POST',
                url: 'players.aspx/getPlayerList',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var listData = eval(data.d);


                    $('#test').DataTable({
                        data: listData
                         ,
                        "columns": [
                            { "data": "id" },
                            { "data": "playername" },
                            { "data": "points" },
                            { "data": "steals" },
                            { "data": "blocks" },
                            { "data": "assists" },
                            { "data": "mpg" },
                            { "data": "shootingpercentage" },
                            { "data": "threepointpercentage" }
                        ]
                    });




                },
                error: function () {
                    alert('failure');
                }
            });
        }

使用此webmethod

[WebMethod(EnableSession = true)]        
        public static object getPlayerList()
        {
            NBAPlayerRepository players = new NBAPlayerRepository();
            DataTable dt = players.GetAll();
            var json = JsonConvert.SerializeObject(dt);
            return json;            
        }

添加新行数据时，如何更新数据表？

我知道ajax.reload，但我不确定这是否适用，因为我使用Webmethod加载表而不是.json文件。除了重新加载之外还有另一种方法可以更好地实现我的实现吗？

Answer 1

如果我已正确解释您的评论，您说虽然数据在另一个带有ajax的页面上更新，但数据库中的数据也会更新。这意味着如果你重新调用web方法，你将获得更新的数据（这个答案依赖于这是真的）。

问题在于您是在ajax调用的成功回调中构建DataTable。我建议切换代码的格式，使ajax成为DataTable的一个选项，这将有助于更好地更改数据。如果您不愿意/能够进行此更改，请发表评论，我将尝试重新设计解决方案以便以其他方式工作。

如果您可以进行更改，则可以在数据更新到数据库后调用ajax重新加载。这样做的方法如下：

var table =  $('#test').DataTable({
    "ajax": {
        method: 'POST',
        url: 'players.aspx/getPlayerList',
        contentType: "application/json; charset=utf-8",
        dataSrc: 'data'
    },
    "columns": [
        { "data": "id" },
        { "data": "playername" },
        { "data": "points" },
        { "data": "steals" },
        { "data": "blocks" },
        { "data": "assists" },
        { "data": "mpg" },
        { "data": "shootingpercentage" },
        { "data": "threepointpercentage" }
    ]
});

然后，在您更新数据后，只需致电table.ajax.reload();，即可重新加载数据。

注意：如果您想指定更多选项，请参阅this page以获取dataTables的ajax选项的文档。

Answer 2

这将在您添加新行时向网格添加新行而不从数据库中获取整个列表。

var t = $('#test').DataTable();

$('#addRow').on( 'click', function () {
   t.row.add(["id","playername","points","steals","blocks","assists","mpg","shootingpercentage","threepointpercentage"]).draw( false );
});

或者您可以清除网格中的任何内容并从db重新加载。

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(listData);

如何使用webmethod数据源刷新jQuery Datatable？

2 个答案: