Как настроить datatable для перемещения информации о разбивке на страницы

Есть ли способ переместить информацию о разбивке на страницы, например «Показать записи», вместо поля поиска, удалив поле поиска. Также мне нужно переместить другую информацию о разбивке на страницы, например «показ от 1 до 2 из 2 записей», в левую часть «показать записи». Я показал это на прикрепленном изображении.

Моя скрипка находится здесь по адресу http://jsfiddle.net/inDiscover/56d1t0jt/.

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>data2</td>
            <td>data2</td>
            <td>data2</td>
        </tr>       
    </tbody>
</table>

JS-код

$(document).ready(function(){
    $('#myTable').dataTable();
});

details_to_move_pagination_info_shown_HERE


jquery datatables
person user3742125    schedule 22.12.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, что вам нужен вариант sDom. Это позволяет отображать или скрывать определенные поля, а также определять, где и в каком порядке они отображаются:

$(document).ready(function(){
    $('#myTable').dataTable({"sDom": '<"H"ilr><"clear">t<"F"p>' });
});

<"H"ilr> означает, что i(информация), l(изменение длины) и r(обработка) должны находиться в заголовке.

<"clear"> означает, что там размещен элемент HTML с классом clear. (иначе таблица неуместна). Тогда t — это фактическая таблица, а после этого <"F"p> означает, что p (нумерация страниц) помещается в нижний колонтитул.

http://jsfiddle.net/56d1t0jt/2/

Я также добавил немного CSS, чтобы правильно выровнять «Показать * записи» справа.

#myTable_length {
    float: right;
    text-align: right;
}
person Ivar    schedule 22.12.2015
comment
Не могли бы вы сказать мне, как я могу прочитать sDom: '‹Hilr›‹clear›t‹Fp›' - person user3742125; 22.12.2015
comment
хорошо .... Есть ли шанс, что не появится такая информация, как «Показ от 1 до 2 из 2 записей». Я имею в виду любую настройку, которая должна быть сделана, чтобы показать/скрыть эту информацию. Я использовал ‹Hilr›, но он не показывает эту информацию для меня. - person user3742125; 22.12.2015
comment
Я использовал sDom как - sDom: ‹'H'ilr‹'transPdfWrapper pdfWrapper left'›'‹'transExcelWrapper excelWrapper left'››t. Это не дает мне Показ....... - person user3742125; 22.12.2015
comment
Это происходит, когда я использую его здесь, на JSFiddle. Возможно, ваши элементы div transPdfWrapper или transExcelWrapper отталкивают его. - person Ivar; 22.12.2015
comment
да... я понял... класс dataTables_info имеет скрытую видимость. Bcz этой информации не было видно. Есть ли способ настроить этот класс - person user3742125; 22.12.2015
comment
Вы можете просто изменить CSS на видимый. Что-то вроде .dataTables_info { visibility: visible; } - person Ivar; 22.12.2015
comment
В некоторых местах его видимость должна быть скрыта. Поэтому я не могу изменить класс таким образом, потому что это повлияет на все остальные места. Есть ли другой способ сделать это видимым в одном (определенном) месте. Извините за путаницу. - person user3742125; 22.12.2015
comment
В этом случае вы можете просто добавить класс в таблицу, где он должен быть виден. Если вы добавите класс visible_entity_count в свою таблицу, вы можете использовать что-то вроде этого: .visible_entity_count .dataTables_info { visibility: visible; } - person Ivar; 22.12.2015