如何使用数据表在表上显示较少的文本? [英] How to show less text on a table using datatables?

问题描述

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

I'm using datatables jquery library to show some results from a Database.

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 ,
});

但是某些数据具有长文本，因此表超出了浏览器的宽度.

But some data has long text, So the table exceeds the browser width.

我尝试了以下CSS:

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

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

But the length of the text increased and the height of the table too, Also one of the columns contain a URL which that property not working with.

所以我需要使用readmore按钮之类的东西.

So I need to use something like a readmore button.

数据表是否具有该选项?还是我应该创建那个?

Does datatables has that option? Or I should create that?

推荐答案

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

You can use createdCell callback to get the rendered cell and then you can do any DOM Manipulation that you want...

这是一个(不是很语义，但可以正常工作的)示例:

Here's an (not very semantic but working) example:

$(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>

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

Btw, There's also a ellipsis renderer plugin here but it doesn't have show/hide fuctionality

这篇关于如何使用数据表在表上显示较少的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！