jquery中的dataTable表格控件中如何插入超链接或者按钮?

如将表中的人员姓名变成超链接... 如将表中的人员姓名变成超链接 展开
 我来答
森林的沉睡
推荐于2017-08-06 · TA获得超过297个赞
知道小有建树答主
回答量:179
采纳率:85%
帮助的人:157万
展开全部

jquery.datatable 初始化时可以在column或者columnDefs中定义render方法, 可以返回自定义的表格单元结构

举个栗子(javascript初始化的数据源):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="sleest">
    <meta name="description" content="datatable example with column render, 2017/08/04">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.15/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="example" class="display" width="100%"></table>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
    <script>
    +(function($) {
        var dataSet = [
            ["Tiger Nixon", "System Architect", "Edinburgh"],
            ["Garrett Winters", "Accountant", "Tokyo"],
            ["Ashton Cox", "Junior Technical Author", "San Francisco"],
            ["Cedric Kelly", "Senior Javascript Developer", "London"]
        ];
        $(function() {
            $('#example').DataTable({
                data: dataSet,
                columns: [
                    { title: "Name", sortable: false, render: function(data, type, row) { return '<a href="###">' + data + '</a>'; } },
                    { title: "Position", sortable: false },
                    { title: "Office", sortable: false },
                ]
            });
        });
    })(jQuery);
    </script>
</body>
</html>

结果:

具体可以参考官方api:

https://datatables.net/examples/advanced_init/column_render.html

匿名用户
2014-08-18
展开全部

官网有例子在API,addrow那个例子里

<button id="addRow">Add new row</button>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
</table>
//引入其他js
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
'<input type="button" value="button"/>',
'<a href="xxx">超链接</a>',
counter +'.4',
counter +'.5'
] ).draw();

counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );
</script>

add里面的分号内容 随便你插入什么格式的东西只要标签对就可以

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
cold_可乐
2014-08-18
知道答主
回答量:9
采纳率:0%
帮助的人:9.7万
展开全部
把程序的源代码贴一下
追问
这是别人写的jquery的控件,挺有名的。你搜“jquery的dataTable控件”就知道了。一万多行JS代码
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式