Jquery DataTable 数据绑定

最新推荐文章于 2022-02-16 20:28:05 发布

枫无叶

最新推荐文章于 2022-02-16 20:28:05 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42220663/article/details/80896974

这篇博客介绍了两种在Jquery DataTable中进行数据绑定的方法。第一种方法通过设置`ajax`属性，从"/Staff/Search"获取数据。第二种方法则是移除`ajax`属性，通过`$.get`异步请求数据，然后手动更新表格内容。两种方法都在保存或刷新时调用相应的函数来更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接代码：

第一种方法:

var table;

$(document).ready(function(){

table =$("#data1").DataTable({

"columnDefs"[{

"visible": false,
"targets": 0

}],

ajax: "/Staff/Search",

            "select": true,
            lengthMenu: [[15, 30, 50, -1], [15, 30, 50, "所有"]],
            pageLength: 15,

"columns": [

{ "data": "id", "title": "主键" },

{ "data": "name", "title": "姓名" },

{
                    "title": "性别", "render": function (data, type, row, meta) {
                        var result = "";
                        if (row.gender == "F") {
                            result = "女";
                        }
                        else {
                            result = "男";
                        }
                        return result;
                    }
   },

{
"title": "出生日期", "render": function (data, type, row, meta) {
var result = row.birthday;

                        if (result.length == 8) {
                            result = result.substring(0, 4) + "-" + result.substring(4, 6) + "-" + result.substring(6, 8)
                        }
                        return result;
                    }
}]

});

//以下代码是在保存时或者需刷新dataTable时调用

table.ajax.reload(null, false);

第二种方法：

去掉第一种方法中的ajax属性，

添加方法

function loaddata()

{

   $.get("/Staff/Search", {}).then(function (data) {
   table.clear();
table.rows.add(data);
   table.draw();
   }).catch(function () {
$.alert("未能加载正确的数据");
   });

}

//以下代码是在保存时或者需刷新dataTable时调用

loaddata();