Question

我正在使用jQuery数据表

<div id="wrapperDiv">

<table id="dataTable"> <!-- data --> </table>

<div/>

包装器的宽度为960像素，表格为1080像素（它有更广泛的数据）

我试过

-    setting width: 100% in table tag inline CSS
-    setting overflow-x auto; in table tag

来自

的有前景的解决方案

jQuery DataTables: control table width

How to set column widths to a jQuery datatable?

DataTables width problem

Jquery DataTables - Table width is shorter than dataTable_wrapper width

它们都不适合我，作为一种解决方法，我增加了包装器DIV的宽度以适应数据表。有什么帮助吗？

Answer 1

我已经连续几个月出现了同样的问题，没有一个建议的解决方案解决了我的问题。今天我决定蛮力，它起作用。它不是最优雅的解决方案，我也不会说它是正确的＆＃34;这样做的方式，但它起作用，并且影响很小。

$(document).scroll(function() {
            var greatestWidth = 0;
            $('.dataTable').each(function() {
                if (greatestWidth < $(this).width()) {
                    greatestWidth = $(this).width();
                }
            });

            $('#yourcontainer').width(greatestWidth);
        });

基本上我只是尝试找到最大的表（也适用于高度）每当用户滚动然后将容器设置为该宽度时。我必须这样做的原因是我使用ajax和一些API来填充数据和设置，因此表在完成之前会自行调整几次。由于在事后发生的一些调整大小和重新格式化，DataTables的所有函数都不起作用，并且$（document）.ready（）不起作用，因为在文档加载后更改了表。

它很难看，但它会起作用。

Answer 2

您可以修改样式

using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices.ComTypes;

public class ResultSet
{
    public List<T> GetResult<T>(string search, string sortOrder, int start, int length, List<T> dtResult, List<string> columnFilters) where T : class
    {
        return FilterResult(search, dtResult, columnFilters).OrderBy(sortOrder).Skip(start).Take(length).ToList();
    }
    public int Count<T>(string search, List<T> dtResult, List<string> columnFilters) where T : class
    {
            return FilterResult(search, dtResult, columnFilters).Count();
    }

    private IQueryable<T> FilterResult<T>(string search, List<T> dtResult, List<string> columnFilters) where T : class
    {
        IQueryable<T> results = dtResult.AsQueryable();

        results = results.Where(p => (search == null || (p.Name != null && p.Name.ToLower().Contains(search.ToLower()) || p.PublicDisplayNo != null && p.PublicDisplayNo.ToLower().Contains(search.ToLower()))));

        return results;
    }
}

Answer 3

以下对我有用：

定义一个新类，我称之为“可包装”。将此类添加到datatable列类使得它将文本包装在单元格中，因此它不会溢出到右侧的其他单元格

table.dataTable tbody td.wrappable { white-space:normal; }

将类应用于dataTable中的列

var columns = [ { data: null, title: " Request Details ", className: "all wrappable", width: '200px', sortable: true, autoWidth: false, render: function (data, type, row) { var year = 'Fiscal Year: ' + naIfNullOrEmpty(data.FISCAL_YEAR) + ''; var cycle = 'Cycle: ' + naIfNullOrEmpty(data.CdSnfCycle.NAME) + ''; var notes = '
Notes: ' + naIfNullOrEmpty(data.NOTES) + ' '; return year + cycle + notes; } }, ]

希望这有助于某人

数据表从容器DIV中生长出来

3 个答案: