option columns.render 渲染列(2) 添加自定义按钮

DataTables中文网 26 April 2016

Tags: 不定时一讲


参数详解连接 columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲 columns.render 3不定时一讲 columns.render 4不定时一讲

昨天暂且列出了7个问题,今天讲第二个,怎么在表格的最后一列,添加自定义的按钮,比如说【删除】

同样是如下的数据:

1
2
3
4
5
6
{
    data:[
        {"name":"DataTables中文网","age":2,"id":1},
        {"name":"DataTables中文网2","age":3,"id":2}
    ]
}

如果要删除一条数据,我们一般是根据id来操作,因为他是唯一的

js部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var table = $("#tableid").DataTable({
    ajax: {
        url: "data.json",
        type: "POST"
    },
    columns: [{
        data: "name"
    },
    {
        data: "age"
    },
    {
        data: null
    }],
    columnDefs: [{
        //   指定第最后一列
        targets: 2,
        render: function(data, type, row, meta) {
            return '<a type="button"  href="#" onclick="del("' + row.id + '","' + row.name + '")" >删除</a>';
        }
    }]
});

//删除方法
function del(id, name) {
    $.ajax({
        url: "del.action",
        //在后台接受id这个参数
        data: {
            id: id
        },
        success: function(data) {
            if (data.flag) {
                //如果后台删除成功,则刷新表格,并提示用户删除成功
                //保留分页信息
                table.ajax.reload(null, false);
                alert(name + data.msg);
            }
        }
    })
}

假设上面url:del.action?id=1成功的返回数据如下:

1
2
3
4
{
    flag:true,
    msg:"删除成功"
}

html代码:

1
2
3
4
5
6
7
<table id="tableid">
       <thead>
            <th>姓名</th>
            <th>年龄</th>
                <th>操作</th>
        </thead>
</table>

其实写了两个关于render的使用方法了,应该可以举一反三了,render是不是也没那么难呢?

如果大家也有小技巧和使用经验,欢迎给我发邮件 thxopen@datatables.club


百度站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……