dateTable的简单使用

最新推荐文章于 2022-04-07 14:21:39 发布

一个柠檬味的前端

最新推荐文章于 2022-04-07 14:21:39 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 插件文章标签： dataTable javascript

本文链接：https://blog.csdn.net/yanhailun/article/details/103070622

版权

本文介绍了如何使用JavaScript库dataTable进行表格配置和样式修改。通过在table标签中定义thead，不需写tbody，结合js设置配置选项，利用$.ajax获取数据。在遇到需求更改表格列样式时，可以通过columns的className属性添加class，或使用render定义列内容格式，并添加事件。此外，columnDefs可以用来精细化修改列样式，通过targets选择列并添加属性。

摘要由CSDN通过智能技术生成

使用这个是因为昨天一个小伙伴问我怎么修改里面的配置，但是我没有用过这个东西，所以就稍微研究了一下。
dataTable使用的时候只需要在table标签中写thead就行，tbody是不需要写的，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>datatable的使用</title>
  <script src="./jQuery.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <style>
    .abc{
    
      color: red;
    }
  </style>
</head>
<body>
    <table class="table table-bordered table-striped" id="table-main">
        <thead>      
	        <tr>      
	          <th>用户名</th>    
	          <th>渠道名</th>      
	          <th>游戏名</th>     
	          <th>结果</th>      
	          <th>耗时</th>      
	          <th>创建时间

最低0.47元/天解锁文章

一个柠檬味的前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
dateTable的简单使用

使用这个是因为昨天一个小伙伴问我怎么修改里面的配置，但是我没有用过这个东西，所以就稍微研究了一下。dataTable使用的时候只需要在table标签中写thead就行，tbody是不需要写的，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫