javascript - 如何使用数据表在表格上显示更少的文本？

Question

我正在使用数据表 jquery 库来显示来自数据库的一些结果。

var table =  jQuery('#table').DataTable({
    language: {
        searchPlaceholder: "Search Results",
    } ,
    "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]] ,
    "autoWidth": true,
    "responsive": true,
    "lengthChange": true,
    "ordering": true ,
});

但是有些数据的文本很长，所以表格超出了浏览器的宽度。

我尝试了以下 CSS:

#table td{
    word-break: break-all
}

但是文本的长度增加了，表格的高度也增加了，而且其中一列包含一个该属性无法使用的 URL。

所以我需要使用类似阅读更多按钮的东西。

datatables 有那个选项吗？或者我应该创建那个？

Answer 1

您可以使用 createdCell回调以获取呈现的单元格，然后您可以执行任何您想要的 DOM 操作...

这是一个(不是很语义但有效的)示例:

$(document).ready(function() {
  var table = $('#table').DataTable({
    language: {
      searchPlaceholder: "Search Results",
    },
    "lengthMenu": [
      [5, 10, 25, 50, 100, -1],
      [5, 10, 25, 50, 100, "All"]
    ],
    "autoWidth": true,
    "responsive": true,
    "lengthChange": true,
    "ordering": true,
    columnDefs: [{
      targets: [1, 4],
      createdCell: function(cell) {
        var $cell = $(cell);


        $(cell).contents().wrapAll("<div class='content'></div>");
        var $content = $cell.find(".content");

        $(cell).append($("<button>Read more</button>"));
        $btn = $(cell).find("button");

        $content.css({
          "height": "50px",
          "overflow": "hidden"
        })
        $cell.data("isLess", true);

        $btn.click(function() {
          var isLess = $cell.data("isLess");
          $content.css("height", isLess ? "auto" : "50px")
          $(this).text(isLess ? "Read less" : "Read more")
          $cell.data("isLess", !isLess)
        })
      }
    }]
  });

  //Moving Table Filtering Search Bar To A Table Header.
  $('#tableSearch').html($('.dataTables_filter'));
  //Moving Results Per Page DropDown Menu To A Table Header.
  $('#tablePerPage').html($('#table_length'));
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="table" class="display table table-hover table-responsive">
  <thead>
    <tr class="headContainer">
      <th colspan="3">
        <div id="tablePerPage"></div>
      </th>
      <th colspan="4">
        <div id="tableSearch"></div>
      </th>
    </tr>
    <tr class="secondHeader">
      <th>#</th>
      <th class="rowHeader">Title</th>
      <th class="rowHeader">Image</th>
      <th class="rowHeader">Website</th>
      <th class="rowHeader">Description</th>
      <th class="rowHeader">Date</th>
      <th class="rowHeader">Actions</th>
    </tr>
  </thead>
  <tbody id="tableContent">
    <tr class="tableRow">
      <td id="post_id">1</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
      <td>https://placehold.it/300/300</td>
      <td> <a href="" target="_blank">http://website.com</a> </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis possimus maiores, culpa sequi officiis nisi deserunt ratione voluptatem quasi, repellendus reiciendis obcaecati voluptatibus placeat qui quidem sint ex odit impedit!</td>
      <td>09-07-2018</td>
      <td>
        <button id="editPost" class="tableAction editPost btn btn-success" data-toggle="modal" data-target="#editData" data-id="1">Edit <span class="glyphicon glyphicon-pencil"></span></button>

        <button id="deletePost" data-id="1" class="tableAction deleteDist btn btn-danger">Delete <span class="glyphicon glyphicon-remove"></span></button>
      </td>
    </tr>
  </tbody>
</table>

顺便说一句，还有一个省略号渲染器插件 here但它没有显示/隐藏功能