0
В таблице используются фильтры, и я также хочу использовать пейджер. Я не квалифицирован в javascript/jquery, поэтому не знаю, что не так. Я знаю, что как только я укажу контейнер pagerOptions, браузер выйдет из строя. Если я укажу контейнер на не существующую, страница загружается, и таблица отлично работает, также на странице загружается только 10 строк таблицы, поэтому что-то работает правильно.jQuery-tablesorter пейджер и фильтр сбой браузера
Есть два примера, которые я пытаюсь использовать, но они очень отличаются от сценария использования пейджера.
Этот source говорит, что он использует фильтр и пейджер. Я пробовал изменить мой код на основе этого в течение прошедшего дня без везения. Кроме того, этот источник, казалось, забыл html и css. :/Я просматривал источник страницы, но это не помогло.
Этот source использует только пейджер, и скрипты очень разные. Я не понимаю, почему.
Есть ли у моего сценария что-то переоцененное или что-то в этом роде?
Gemfile.lock
jquery-tablesorter (1.12.8)
railties (>= 3.1, < 5)
страницу:
<div class="pager">
Page: <select class="gotoPage"></select>
<img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
<select class="pagesize">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</div>
<div id="container" style="width:1400px; margin-left: auto; margin-right: auto;">
<table width="100%" class="tablesorter">
<thead>
<tr>
<th width="40%" data-placeholder="Search">Question</th>
<th width="12%" data-placeholder="Search">Category</th>
<th width="6%" data-placeholder="Search">Type</th>
<th width="9%" data-placeholder="Search">Product</th>
<th width="8%" data-placeholder="Search">Section</th>
<th width="8%" data-placeholder="Search">Created</th>
<th width="8%" data-placeholder="Search">Updated</th>
<th width="9%" class="filter-false remove sorter-false">Functions</th>
</tr>
</thead>
<tbody>
<%= render @questions %>
</tbody>
</table>
</div>
<script>
$(function() {
// For Pages!
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} - {endRow}/{filteredRows} ({totalRows})',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// go to page selector - select dropdown that sets the current page
cssGoto: '.gotoPage'
};
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content ui-corner-all',
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow : '',
footerCells: '',
icons : 'ui-icon', // icon class added to the <i> in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow : '',
even : 'ui-widget-content', // odd row zebra striping
odd : 'ui-state-default' // even row zebra striping
});
var $table = $("table")
.tablesorter({
theme: 'jui',
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
widgets: ['uitheme', 'zebra', 'filter'],
widgetOptions: {
zebra : ["even", "odd"],
filter_columnFilters : true,
filter_ignoreCase : true,
filter_liveSearch : true,
filter_searchDelay : 300,
filter_reset : 'button.reset',
}
})
// initialize Pager plugin
.tablesorterPager(pagerOptions);
// Target the $('.search') input using built in functioning
// this binds to the search using "search" and "keyup"
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch($table, $('.form-control'));
// Basic search binding, alternate to the above
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
// keyup allows dynamic searching
/*
$(".search").bind('search keyup', function (e) {
$('table').trigger('search', [ [this.value] ]);
});
*/
// Allow changing an input from one column (any column) to another
$('selectpicker').change(function(){
// modify the search input data-column value (swap "0" or "all in this demo)
$('.selectable').attr('data-column', $(this).val());
// update external search inputs
$.tablesorter.filter.bindSearch($table, $('.form-control'), false);
});
$("#questions").removeClass('tablesorter tablesorter-jui');
});
</script>
<script src="/assets/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>