jQuery отзывчивый Datatables Настройка CSS и разбиение на страницы

Question

Я использую jQuery и jQuery datatables (1.10.1), чтобы создать «отзывчивые» datatables. Я пытаюсь настроить 2 вещи 1. Посмотрите и почувствуйте, предоставив свои собственные CSS 2. Элементы управления разбиением на страницы и поиска.

Вот скрипка - http://jsfiddle.net/urwyrj89/

Я добавил мой собственный CSS но это, кажется, не принимать его, потому что мой CSS имеет background-color, который не отображается на пользовательском интерфейсе:

.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #d6e9f8; 
    text-align: left; 
    border: 1px solid #ccc; 
    font-size: 11px; 
    padding: 4px; 
    color: #333; 
} 

Но это никогда не применяет его. Я попытался сразу же поставить class, а также заменить на время выполнения в jQuery. Я новичок в этом, так по достоинству оценят некоторые указатели?

Кроме того, я хочу настроить элемент управления разбиением на страницы. Вместо просмотра по умолчанию, т.е.

Я хочу контроль, чтобы быть как ниже, а также, то позиционируется как на верхней и нижней

ли, что настройка возможно? Любые указатели на то, как его достичь?

Answer 1

Вы должны применить свой стиль, используя правило ниже, или использовать !important, что является менее предпочтительным.

table.dataTable.tablesorter thead th, 
table.dataTable.tablesorter tfoot th { 
    background-color: #d6e9f8; 
    text-align: left; 
    border: 1px solid #ccc; 
    font-size: 11px; 
    padding: 4px; 
    color: #333; 
} 

См. this jsFiddle для демонстрации.

---

Относительно пагинацией, есть Select list нумерацией страниц плагин. Вам нужно включить соответствующий плагин JS и использовать pagingType: "listbox" вариант инициализации см пример ниже:

$('#example').DataTable({ 
    responsive: true, 
    pagingType: "listbox" 
}); 

См this jsFiddle для демонстрации.