0
該表使用過濾器，我也想使用尋呼機。我不熟悉javascript/jquery，所以我不知道什麼是錯的。我知道，只要我指定了pagerOptions容器，瀏覽器就會崩潰。如果我將容器指定爲不存在的頁面，頁面加載並且表格工作得很好，頁面也只加載10個表格行，所以某些工作正常。jQuery-tablesorter尋呼機和過濾器崩潰瀏覽器
我試圖引用兩個示例，但它們與使用pagerOption的腳本非常不同。
這個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>