带按钮的DataTables表格

最新推荐文章于 2024-08-10 07:10:26 发布

程序猿_小天

最新推荐文章于 2024-08-10 07:10:26 发布

阅读量3.6k

点赞数

这是一个带按钮DataTables表格。

其中下列文件是必要的文件：

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
            <!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- 图标库CSS文件 -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<!-- DataTables JS-->
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="js/popper.min.js"></script>

接下来是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

    <title>DataTables测试</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
    <script type="text/javascript" language="javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
	<script type="text/javascript" charset="utf8" src="js/popper.min.js"></script>
	<!-- 图标库CSS文件 -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
        var dataSet = [
            ['Internet Explorer 4.0','Win 95+','4','X','19'],
            ['Internet Explorer 5.0','Win 95+','5','C','19'],
            ['Internet Explorer 5.5','Win 95+','5.5','A','19'],
            ['Internet Explorer 6','Win 98+','6','A','19'],
            ['Internet Explorer 7','Win XP SP2+','7','A','19'],
            ['AOL browser (AOL desktop)','Win XP','6','A','19']
         
        ];

        $(document).ready(function() {
            var selected = [];

            $('#demo').html( '' );

            var table = $('#example').dataTable( {
                "data": dataSet,//数据源
                "columns": [
                    { "title": "设备名称"},
                    { "title": "设备状态" },
                    { "title": "供电类型", "class": "center " },
                    { "title": "设备位置", "class": "center" },
					{ "title": "当地温度", "class": "center" },
					{ "title": "操作", "class": "center" }
                ],
                "aoColumnDefs":[//设置列的属性，此处设置第一列不排序
                    {"bSortable": true, "aTargets": [0]},{ "class": "tn", "targets": [ 0 ] },
                    {
                        "targets": -1,
                        "class": "but_xq",
                        "data": null,
                        
                        "defaultContent": "        <a id=\"dianchi\" href=\"http://www.baidu.com\" class=\"fa fa-battery-full\" style=\"color:#fe9e19;font-size:18px\"></a>    <a id=\"dianyuan\"  href=\"http://www.qq.com\" class=\"fa fa-plug\" style=\"color:#b52c26;font-size:18px\"></a>    <a id=\"xiangxi\"  href=\"http://www.sougou.com\" class=\"fa fa-fax\" style=\"color:#9889c1;font-size:18px\"></a>"
                    } 
                ],
                "aaSorting": [[1, "desc"]], //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
                "oLanguage": {//插件的汉化
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "抱歉， 没有找到",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有数据",
                    "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前一页",
                        "sNext": "后一页",
                        "sLast": "尾页"
                    },
                    "sZeroRecords": "没有检索到数据",
                    "sProcessing": "<img src='' />",
                    "sSearch": "搜索"
                },
               
                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "全部"]]

            } );

            



          


        
            /**
             * 电池信息
             */
		$('a#dianchi').on( 'click', 'a#dianchi', function () {
                var data = $('#example').DataTable().row($(this).parents('tr')).data();              
            } );

            /**
             * 电源信息
             */
            $('a#dianyuan').click(function () {
                var data = $('#example').DataTable().row($(this).parents('tr')).data(); 
            } );
			/**
             * 详细信息
             */
            $('a#xiangxi').click(function () {
                var data = $('#example').DataTable().row($(this).parents('tr')).data(); 
            } );
			
        } );
    </script>
</head>

<body class="dt-example">
<table cellpadding="0" cellspacing="0" border="1" class="display" id="example">
	
</table>
</body>
</html>

推荐一下，我的群：789826996

里面的代码是参考了这位大牛的（https://blog.csdn.net/ghgzczxcvxv/article/details/47024015），在此谢谢这位大神！