dataTables简单配置(jQuery/鼠标滑过行高亮/点击行高亮)

最新推荐文章于 2025-04-06 09:12:57 发布

前端bug工程师

最新推荐文章于 2025-04-06 09:12:57 发布

阅读量1.5k

点赞数

分类专栏：其他文章标签： jquery javascript css html5 前端

本文链接：https://blog.csdn.net/weixin_45421249/article/details/112302756

版权

其他专栏收录该内容

2 篇文章

订阅专栏

此代码示例展示了如何使用jQuery DataTables插件配置一个表格，包括样式设置、行鼠标悬停和点击高亮效果，以及数据加载、排序、搜索等功能。数据来源于2020年11月轿车销量排行榜的json数据，包括车名、销量、品牌等信息。

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

dataTables基本配置

提示：以下是本篇文章代码示例，下面案例可供参考

json数据点击–>2020-11轿车销量排行top10json数据

<style>
    .table {
        padding-top: 2%;
        color: #13283d;
        text-align: center;
        width: 70%;
        margin: auto;
    }
    #datatable>thead>tr {
        background: rgba(14, 148, 234, 0.5);
    }
    table.dataTable tbody .badao_hoverd {
        background-color: rgba(17, 62, 63, 0.1);
        cursor: pointer;
        /* 鼠标滑过 手型 */
    }
    table.dataTable tbody .selected {
        background-color: rgba(35, 198, 200, 0.5);
    }
</style>

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<body>
    <div class="table">
        <thead>2020-11轿车销量排行</thead>
        <table id="datatable" style="width: 100%">
            <thead>
                <tr>
                    <th>车名</th>
                    <th>销量</th>
                    <th>品牌</th>
                    <th>指导价</th>
                    <th>车型</th>
                    <th>月份</th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
</body>

<script>
    //鼠标滑过行 高亮
    $("#datatable tbody").on('mouseover', 'tr', function () {
        if (!$(this).hasClass('badao_hoverd')) {
            $(this).addClass('badao_hoverd')
        }
    }).on("mouseleave", "tr", function () {
        if ($(this).hasClass('badao_hoverd')) {
            $(this).removeClass('badao_hoverd')
        }
    })
    //点击行 高亮
    $("#datatable tbody").on('click', 'tr', function () {
        if (!$(this).hasClass('selected')) {
            $('tr.selected').removeClass('selected');
            $(this).addClass('selected')
        }
    })
    //表格相关属性配置
    $(document).ready(function (tableData) {
        $("#datatable").DataTable({
            "data": data,
            "columns": [{
                    "data": "carName",
                    "orderable": false, // 不显示排序按钮
                },
                {
                    "data": "carPrice"
                },
                {
                    "data": "carOrigin",
                    "orderable": false,
                },
                {
                    "data": "carSales"
                },
                {
                    "data": "carModel",
                    "orderable": false,
                },
                {
                    "data": "carMTime",
                    "orderable": false,
                },
            ],
            // createdRow: function (row, data, dataIndex) { //默认第一行高亮
            //     if (dataIndex == 0) {
            //         $(row).addClass('selected')
            //     }
            // },
            "paging": false, //隐藏分页
            "bFilter": false, //隐藏搜索框
            "info": false, //隐藏info
            "order": [
                [1, 'desc']
            ], //默认排序
        })
    })

    // 点击行时  进行相关操作
    $("#datatable").on("click", "tr", function (e) {
        let name = e.target.parentNode.childNodes[0].innerText
        if (!(name == '车名')) {
            console.log(name)
        }
    })
</script>

效果图

总结

以上代码仅供参考,如有不正望指出。
json数据如下自取:

var data = [{
          "id": "1",
          "carName": "轩逸",
          "carPrice": "54470",
          "carSales": "9.98-14.30万",
          "carOrigin": "东风日产",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "2",
          "carName": "朗逸",
          "carPrice": "48278",
          "carSales": "9.99-16.19万",
          "carOrigin": "上汽大众",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "3",
          "carName": "宝来",
          "carPrice": "44217",
          "carSales": "9.88-15.70万",
          "carOrigin": "一汽大众",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "4",
          "carName": "英朗",
          "carPrice": "40440",
          "carSales": "11.98-15.98万",
          "carOrigin": "上汽通用别克",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "5",
          "carName": "卡罗拉",
          "carPrice": "35373",
          "carSales": "9.98-14.30万",
          "carOrigin": "一汽丰田",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "6",
          "carName": "速腾",
          "carPrice": "34210",
          "carSales": "12.89-19.29万",
          "carOrigin": "一汽大众",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "7",
          "carName": "宏光MINI",
          "carPrice": "28246",
          "carSales": "2.88-3.88万",
          "carOrigin": "上汽通用五菱新能源",
          "carModel": "微型车",
          "carMTime": "2020-11"
      },
      {
          "id": "8",
          "carName": "思域",
          "carPrice": "28068",
          "carSales": "11.99-16.99万",
          "carOrigin": "东风本田",
          "carModel": "紧凑型车",
          "carMTime": "2020-11"
      },
      {
          "id": "9",
          "carName": "雅阁",
          "carPrice": "24162",
          "carSales": "17.98-25.98万",
          "carOrigin": "广汽本田",
          "carModel": "中型车",
          "carMTime": "2020-11"
      },
      {
          "id": "10",
          "carName": "迈腾",
          "carPrice": "23205",
          "carSales": "18.69-30.99万",
          "carOrigin": "一汽大众",
          "carModel": "中型车",
          "carMTime": "2020-11"
      }
  ]