Datatables 自定义按钮

Datatables 自定义按钮方法有如下:

1、

$('#eq_table').DataTable({
            data: tmp,
            columns:[
                {data: "id"},
                {data: "name"},
                {data: "ip"},
                {data: "description"},
                {data: null}
            ],
            columnDefs:[{
                targets: 4,
                render: function (data, type, row, meta) {
                    return ' + row.id + ') >删除';
                }
            },
                { "orderable": false, "targets": 4 },
            ],
            language:{
                "sProcessing":   "处理中...",
                "sLengthMenu":   "显示 _MENU_ 项结果",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                "sInfoEmpty":    "显示第 0 至 0 项结果,共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });

另外参考:

1、第一种发放比较简单

"columns": [
					
		{ "data": null,defaultContent: '
', orderable: false },
					
	],

从代码字面意思就能明白什么意思,但是怎样从里边获取改行的信息我还不知道,所以显得不是太实用,定义默认值还可以。

{ "data": "id",orderable: false,
						"mRender":function(data,type,full){
							return "";
						}	
					},

刚看到一种方法就是使用回调,也可以获取该列的值并传递,但也只能获取一个值,仍然没有第二种方法好。


2、第二种稍微麻烦,但比较实用

"fnRowCallback":function(nRow,aData,iDataIndex){
        	var id = $('td', nRow).eq(0).text();
	        var ip = $('td', nRow).eq(3).text();
        	$('td:eq(-1)',nRow).html('修改 '+
        	'删除');
        	return nRow;
        }, 

在初始化行数据时调用一个回调方法,可以轻松的获取该行数据,完成提交功能,但是有个缺点,需要后台json传一个空字段,也不够灵活。


3、第三种方法,就是将两种方法结合使用,可以完全前台无需后台操作


{ "data": null,orderable: false,}

"fnRowCallback":function(nRow,aData,iDataIndex){
        	var id = $('td', nRow).eq(0).text();
	        var ip = $('td', nRow).eq(3).text();
        	$('td:eq(-1)',nRow).html('修改 '+
        	'删除');
        	return nRow;
        },  


你可能感兴趣的:(DataTable,Datatables自定义按钮)