Заголовок JQuery Datatables сглаженный с вертикальной прокруткой

Ответ 1

У меня была проблема, и это оказалось побочным эффектом с моим CSS. Попробуйте отключить все внешние css и посмотреть, не исчезла ли проблема.

Ответ 2

У меня такая же проблема. Он отлично работает (выравнивается по пикселям в столбце) в Mozilla Firefox, Opera, но не в Chrome 21.

Решение:

Как упоминалось в этом сообщении http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

В основном, что происходит, заключается в том, что DataTables пытается прочитать ширину таблицы, которую нарисовал браузер, поэтому он может сделать совпадение заголовка. Проблема в том, что когда DataTables делает это расчет на вашей странице, браузер не показывал полосу прокрутки - и поэтому расчет немного неправильный! Причина, по которой я предлагаю это ошибка Webkit, заключается в том, что даже после того, как DataTables пробежала все из этой логики полоса прокрутки все еще не отображается. Если вы добавите в следующем коде вы можете увидеть эффект этого:

console.log($ (oTable.fnSettings().nTable).outerWidth());     setTimeout (function() {     console.log($ (oTable.fnSettings().nTable).outerWidth()); }, 1);

Интересная часть состоит в том, что после того, как я добавил setTimeout и после нее был еще один столбец, не выровненный. После добавления "sScrollX": "100%", "sScrollXInner": "100%" все столбцы были выровнены (пиксель-совершенный).

Решение для Chrome/Chromium, работы с файлами в FF, Opera, IE9:

$(document).ready(function()
{
  var oTable = $('#mytable').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});

Ответ 3

Я решил эту проблему, обернув таблицу "dataTable" с помощью div с переполнением: auto

.dataTables_scroll
{
    overflow:auto;
}

и добавьте этот JS после инициализации dataTable

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

Не используйте sScrollX или sScrollY, затем удалите и добавьте обертку div, которая делает то же самое.

Ответ 4

if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

Работал идеально для меня!

Ответ 5

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Ответ 6

У меня была аналогичная проблема, но мои изменения изменяются, чтобы соответствовать после поиска или сортировки или взаимодействия с таблицей, чтобы вызвать перерисовку, попробовали функцию перерисовывания... но в конце концов не удавалось импровизировать. Смешное исправление, которое я работал у меня, вызывало oTable.fnFilter( "x",0 ) и oTable.fnFilter( "",0 ) в этом же порядке (поиск и очистка)... это работает... lol..:)

Ответ 7

это может помочь вам (не уверен, но я думаю, что его стоит попробовать)

добавить этот код на страницу

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

взято здесь проблема столбцов ширины в Chrome и Safari

Кроме того, я думаю, что стоит попытаться определить столбцы в конструкторе только вместо того, чтобы определять их в (оставить тег пустым)

Ответ 8

если вы используете загрузку:

.table {
    width: 100%;
    max-width: none; // >= this is very important
}

Ответ 9

У меня также была эта проблема. После нескольких разных попыток я попробовал следующее и преуспел.

Я попробовал добавить метку метки с свойством float в атрибуте style. Затем он нашел работу.

Например:

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>

Ответ 10

Вот как я избавился от этой проблемы:

Я использую это, как правило, для выполнения функций после завершения вызова Ajax.

    WaAjaxHelper = {
    arr_execute_after_ajax: null,
    add_function_to_execute_after_ajax: function (fun) {

        if (typeof fun == 'function') {
            if (!this.arr_execute_after_ajax) {
                this.arr_execute_after_ajax = [];
            }
            this.arr_execute_after_ajax.push(fun)
            return true;
        } else {
            alert('ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible');
            return false;
        }
    },
    execute_after_ajax: function () {
        if (this.arr_execute_after_ajax) {
            $.each(this.arr_execute_after_ajax, function (index, value) {
                try {
                    value();

                } catch (e) {
                    console.log(e);
                }
            })
        }
        this.arr_execute_after_ajax = null;
    }
}


$(document).ready(function () {
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "text/javascript");
            $('.blockUI').css('cursor', 'progress');
        },
        complete: function (jqXHR, textStatus) {
            $('body').removeClass('waiting');
        },
        error: function (jqXHR, textStatus, errThrown) {
            alert("Ajax request failed with error: " + errThrown);
            ajax_stop();
        }
    });
    $(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});


ajax_start = function () {
    // do something here
}
ajax_stop = function () {
   WaAjaxHelper.execute_after_ajax();
}

в представлении:

  var tbl;
  WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})

где tbl хранит объект datatable.

Ответ 11

Имея ту же самую проблему в firefox, Я немного изменил jQuery script (в jquery.dataTables.js версии 1.9.4):

line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

Он работает даже после сортировки и фильтрации.

Ответ 12

У меня была проблема, когда данные в столбцах были слишком большими, чтобы соответствовать, и не было места в данных для разрыва строки. Моим решением было добавить div с переполнением и атрибутом title следующим образом:

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

Это привело к тому, что таблица полностью опустилась.

Ответ 13

Я использую bootstrap, и мне удалось с этим

<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>

Ответ 14

У меня была эта проблема с bootstrap 3, и проблема была связана с левым и правым заполнением на моих элементах th и td, которые я добавил после применения стиля загрузки. Удаление моего левого и правого заполнения исправляло проблему в моем случае.

Ответ 15

Мы можем справиться с этим, используя css и незначительные изменения в sDom.

Добавьте следующий класс в ваш файл css

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

замените свой 't' в атрибуте sDom таблицы с < "scrollDiv" t > и удалите атрибут scrollX таблицы

Сохраните и наслаждайтесь!:)

Ответ 16

Я обнаружил, что ширина будет сдвигаться в первом прокрутке окна, поэтому решение состоит в том, чтобы в первой строке прокрутки запрашивалось только новое рисование таблицы.

const $table = $('#table').DataTable({ ... });

$(window).on('scroll', () => {
  $(window).off('scroll');
  $table.tables().draw();
});

Изменить. Также работает с функцией setTimeout. Это зависит от того, когда происходит несоосность.

$table.tables().draw() является ключевым здесь.

Ответ 17

Я тоже столкнулся с той же проблемой. Я решил это, удалив 'sScrollY':'405px' из свойства datatable и используя исправленный заголовок.

Ответ 18

JS

$('#<%=gridname.ClientID%>').dataTable( {                   

           "paging":         false
            });        

        });

Затем над вашим gridview добавьте элемент div, как показано ниже.

  <div style ="height:600px; overflow:auto;"> 
  <asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
        BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%"  >
etc..
</div>

Ответ 19

Не уверен, что у меня была такая же проблема. Я имел дело с очень большим столом, 40 + столбцами и использовал горизонтальную и вертикальную прокрутку. Однако, если окно браузера было установлено настолько большим, что вы могли видеть всю таблицу, заголовки столбцов были выровнены по горизонтали, а содержимое таблицы было в центре.

Я заметил в firebug, что таблица получила ширину 1352 пикселей через DataTables. Установив, чтобы на 100% все выстраивалось в линию!