我正在使用数据表.js与Laravel.我用ajax发布了一个请求,我想在表中显示返回的响应.有没有办法自定义此表?我们可以通过给标签一个id或类名来定制标签吗?我试过了,但没有任何结果.

100我想使第一列中的文本 colored颜色 为绿色,或者我想在第二列中的文本旁边添加一张照片.

$(function() {
  $("#ordersTable").DataTable({
    processing: true,
    serverSide: false,
    ajax: "{{route('index22')}}",
    
    data : [{"orderId":"1","orderNumber":"ABC123", "orderDate" : "12/Jun/2022"}],
    columns: [{
        data: 'orderId'
      },
      {
        data: 'orderNumber'
      },
      {
        data: 'orderDate'
      },
    ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table id="ordersTable" class="table-striped table">
  <thead>
    <tr>
      <td>ORDER NUMBER</td>
      <td>STORE</td>
      <td>STATUS DATE</td>
    </tr>
  </thead>
</table>

推荐答案

只需使用css即可更改文本 colored颜色 .

要添加图像,可以添加自定义渲染函数,如下所示:

$(function() {
  $("#ordersTable").DataTable({
    processing: true,
    serverSide: false,
    ajax: "{{route('index22')}}",
    
    data : [{"orderId":"1","orderNumber":"ABC123", "orderDate" : "12/Jun/2022"}, {"orderId":"2","orderNumber":"DEF987", "orderDate" : "11/Jun/2022"}],
    columns: [{
        data: 'orderId'
      },
      {
        data: 'orderNumber',
        render: function (data, type) 
        {
          if (type === 'display') 
          {
            return "<img src='https://via.placeholder.com/80x40.png?text=ORDER' />" + data;
          }
          
          return data;
         }
      },
      {
        data: 'orderDate'
      },
    ]
  });
});
#ordersTable tbody tr td:first-child
{
  color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table id="ordersTable" class="table-striped table">
  <thead>
    <tr>
      <td>ORDER ID</td>
      <td>ORDER NUMBER</td>
      <td>ORDER DATE</td>
    </tr>
  </thead>
</table>

Javascript相关问答推荐

vanillajs-datepicker未设置输入值,日期单击时未触发更改事件

D3多线图显示1线而不是3线

将json数组项转换为js中的扁平

提交表格后保留Web表格中的收件箱值?

我开始使用/url?q=使用Cheerio

使用ThreeJ渲染的形状具有抖动/模糊的边缘

ChartJs未呈现

用于在路径之间移动图像的查询

如何在Angular拖放组件中同步数组?

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

TinyMCE 6导致Data:Image对象通过提供的脚本过度上载

为什么当我更新数据库时,我的所有组件都重新呈现?

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

postman 预请求中的hmac/sha256内标识-从js示例转换

P5JS-绘制不重叠的圆

我无法在Api Reaction本机上发出GET请求

Angel Auth Guard-用户只有在未登录时才能访问登录页面,只有在登录时才能访问其他页面

如何处理不带参数的redux thunk payloadCreator回调函数?

为什么我的InDesign Java脚本不能完全工作?

使用重新 Select 和对象理解 Select 器备忘