Javascript 如何显示响应数据表'；s第一列右侧的展开/折叠图标'；s值多少？_Javascript_Css_Datatable_Datatables

Javascript 如何显示响应数据表'；s第一列右侧的展开/折叠图标'；s值多少？

javascript css datatables

Javascript 如何显示响应数据表'；s第一列右侧的展开/折叠图标'；s值多少？,javascript,css,datatable,datatables,Javascript,Css,Datatable,Datatables,我正在使用响应数据表（）。但展开/折叠图标显示在第一列值的左侧如何将其更改为显示在第一列值的右侧还想更改图标样式以使用Font Awesome的图标 JS: $(document).ready( function () { var table = $('#example').DataTable({ responsive: { details: { type: 'column' } },

我正在使用响应数据表（）。但展开/折叠图标显示在第一列值的左侧

如何将其更改为显示在第一列值的右侧

还想更改图标样式以使用Font Awesome的图标

JS:

$(document).ready( function () {
  var table = $('#example').DataTable({
    responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
  });
} );

<!DOCTYPE html>
<html>       
  <body>
    <div class="container">
      <table id="example" class="display responsive" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          </tbody>
      </table>
    </div>
  </body>
</html>

HTML代码：

$(document).ready( function () {
  var table = $('#example').DataTable({
    responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
  });
} );

<!DOCTYPE html>
<html>       
  <body>
    <div class="container">
      <table id="example" class="display responsive" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          </tbody>
      </table>
    </div>
  </body>
</html>


名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$3,120

有一个css选择器

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before

它定义了元素的位置

在css中覆盖它：

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before  {
left: auto;
right: 4px;

}有一个css选择器

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before

它定义了元素的位置

在css中覆盖它：

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before  {
left: auto;
right: 4px;

}/P>< P>将空白<代码> <代码>到最后一列，并将目标值更新到最后一次。

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
响应：{
详情：{
类型：“列”
}
},
columnDefs:[{
类名：“控件”，
可订购：错误，
目标：5
} ],
订单：[1，‘asc']
});
} );

名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$3,120
'< /代码> 将空白<代码> <代码>到最后一列，并将目标值更新到最后一次。

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
响应：{
详情：{
类型：“列”
}
},
columnDefs:[{
类名：“控件”，
可订购：错误，
目标：5
} ],
订单：[1，‘asc']
});
} );

名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$3,120
`
请提供一个简单的代码示例，用于复制您遇到的问题。您的代码在哪里？请提供一个简单的代码示例，用于复制您遇到的问题。您的代码在哪里？