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。

所以我需要使用诸如readmore按钮之类的东西。

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

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，但它没有显示/隐藏功能

Answer 2

基于@Devansh J的解决方案，我进行了一些改进。仅当存在特定大小的换行符时，该按钮才可见。它不像单元格高度那样精确，但是无法找到其他解决方案。 -因此，在响应表上，初始高度为0px（CSS flex）。 Live Demo。

$(document).ready( function () {
    var table = $('#example').DataTable({
      columnDefs: [
{
                    targets: "_all",
                            createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                                //https://stackoverflow.com/a/51242920/14226613
                                //https://datatables.net/forums/discussion/58336/how-to-know-the-height-of-a-cell
                                var $cell = $(cell)
                                if (cellData != null) {
                                    var linebreakes = cellData.split(/\r\n|\r|\n|br/).length
                                } else {
                                    var linebreakes = ''
                                }
                                //some debug
                                /*console.log("###cell:")
                                console.log($cell)
                                console.log("###amount line breakes: " + linebreakes)*/
                                
                                //jquery wrap a new class around the html structure
                                $(cell).contents().wrapAll("<div class='content'></div>");
                                //get the new class
                                var $content = $cell.find(".content");
                                //if there are more line as 12
                                if (linebreakes > 2) {
                                    //change class and reduce height
                                    $content.css({
                                        "height": "20px",
                                        "overflow": "hidden"
                                    })
                                    //add button only for this long cells
                                    $(cell).append($("<button>&#8650;&#x21CA;</button>"));
                                }
                                //get IF of this new button
                                $btn = $(cell).find("button");  
                                //store flag
                                $cell.data("isLess", true);
                                //eval click on button
                                $btn.click(function() {
                                  //create local variable and assign prev. stored flag
                                  var isLess = $cell.data("isLess");
                                  //ternary check if this flag is set and manipulte/reverse button
                                  $content.css("height", isLess ? "auto" : "20px")
                                  $(this).text(isLess ? '\u21C8 \u21C8' : '\u21CA \u21CA')
                                  //invert flag
                                  $cell.data("isLess", !isLess)
                                })
                          }
                    }
          
        ]
    });
})

CSS：

table.dataTable tbody th, table.dataTable tbody td button {
  background-color: #77f772;
  padding: 1px 3px 1px 3px;
  margin: 0px;
  line-height: 1.0;
  vertical-align: middle;
  text-align: center;
  border: 0.5px solid #808080;
  font-size: 90%;
  outline: none;
}

如何使用数据表在表上显示较少的文本？

2 个答案: