Javascript Tablesorter总是在内容编辑后重新加载第一页
我有一个带有tablesorter实现的应用程序。它的特点是内容可编辑、过滤和ajax服务器寻呼机。除了一个问题外，一切都正常：每次用户在页面>1上提交编辑的值时，内容都会提交，但tablesorter会重新加载第一页 查看xhr请求，很明显会发出一个新的get请求（我猜在幕后，在我的代码中，我不会触发任何更新或重新加载）。不管怎么说，这对我来说很好，刷新内容也不错，但我想保留用户在编辑之前所在的页面 正如我所看到的，问题只发生在页面参数上：如果我更改每页的元素数，在列中放置过滤器，或者对一个或多个字段进行排序，tablesorter会跟踪它们，并且它们在请求url参数中正确更新，页面参数除外，页面参数始终恢复为0 从xhr请求端查看的进度中的示例： 第一个请求（默认值）：vlansummarys？page=0&size=10&col[10]=0&col[8]=0&col[7]=0&fcol 添加过滤器：vlansummarys？页面=0&size=10&col[10]=0&col[8]=0&col[7]=0&fcol[3]=monocos 从10到20的页面元素：vlansummarys？页面=0&size=20&col[10]=0&col[8]=0&col[7]=0&fcol[3]=monocos 新增订购字段：vlansummarys？page=0&size=20&col[10]=0&col[8]=0&col[7]=0&col[3]=0&fcol[3]=monocos 页面更改为2:vlansummarys？页面=1&size=20&col[10]=0&col[8]=0&col[7]=0&col[3]=0&fcol[3]=monocos 内容编辑，之后调用：vlansummarys？page=0&size=20&col[10]=0&col[8]=0&col[7]=0&col[3]=0&fcol[3]=monocos 编辑 根据要求，我正在发布我的代码。由于很难将其简化为一个简单的工作示例，因此我将粘贴所有tablesorter初始化函数。它不能单独工作，因为它依赖于页面上计算的其他数据和变量，但我想它应该给出一个非常好的想法。请问我任何可能有帮助的进一步细节Javascript Tablesorter总是在内容编辑后重新加载第一页,javascript,contenteditable,tablesorter,Javascript,Contenteditable,Tablesorter,我有一个带有tablesorter实现的应用程序。它的特点是内容可编辑、过滤和ajax服务器寻呼机。除了一个问题外，一切都正常：每次用户在页面>1上提交编辑的值时，内容都会提交，但tablesorter会重新加载第一页 查看xhr请求，很明显会发出一个新的get请求（我猜在幕后，在我的代码中，我不会触发任何更新或重新加载）。不管怎么说，这对我来说很好，刷新内容也不错，但我想保留用户在编辑之前所在的页面 正如我所看到的，问题只发生在页面参数上：如果我更改每页的元素数，在列中放置过滤器，或者对一个或
function LoadTable() {
$('#table').tablesorter({
theme: 'bootstrap',
//widthFixed: true,
zebra: [
"even",
"odd"],
dateFormat: "ddmmyyyy",
headerTemplate: '{content}',
sortList: [[10, 0], [8, 0], [7, 0]], //Order by AdR del Kit ASC, AdR ASC, Centrale ASC
initWidgets: true,
widgets: bReadOnly ? ['zebra', 'columns', 'filter', 'uitheme'] : ['zebra', 'columns', 'filter', 'uitheme', 'editable'],
widgetOptions: {
filter_columnFilters: true,
filter_cssFilter: arrHeaderFields,
editable_columns: (bReadOnly ? null : [21]), // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
editable_enterToAccept: true, // press enter to accept content, or click outside if false
editable_autoAccept: false, // accepts any changes made to the table cell automatically (v2.17.6)
editable_autoResort: false, // auto resort after the content has changed.
editable_noEdit: 'no-edit', // class name of cell that is not editable
editable_editComplete: 'editComplete', // event fired after the table content has been edited
editable_validate: null, // return a valid string: function(text, original){ return text; }
editable_focused: null,/*function (txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
//$element.addClass('focused');
$element.removeClass("emptyPlaceholder");
//SelectActivationDateText($element.closest('td'));
},*/
editable_blur: null,/*function (txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
//$element.removeClass('focused');
RestoreCellStyle($element);
},*/
editable_selectAll: null,/*true,function (txt, columnIndex, $element) {
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
// only select everthing within the element when the content starts with the letter "B"
//return /^b/i.test(txt) && columnIndex === 0;
},*/
editable_wrapContent: null,//'<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete
/*reorder_axis: 'x', // 'x' or 'xy'
reorder_delay: 300,
reorder_helperClass: 'tablesorter-reorder-helper',
reorder_helperBar: 'tablesorter-reorder-helper-bar',
reorder_noReorder: 'reorder-false',
reorder_blocked: 'reorder-block-left reorder-block-end',
reorder_complete: null // callback*/
},
}).tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}"
ajaxUrl: "/application/vlansummarys?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
// modify the url after all processing has been applied
customAjaxUrl: function(table, url) { return url; },
ajaxProcessing: function (data) {
if (data && data.hasOwnProperty('rows')) {
var str = "", d = data.rows,
// total number of rows (required)
total = data.total_rows,
// len should match pager set size (c.size)
len = d.length;
for (var i = 0; i < len; i++) {
str += '<tr>';
for (var column = 0; column < orderedFieldMapping.length; column++) {
//Distinzione temporanea per gestire i casi di dato non presente (Data Attivazione) e handler di selezione
if (orderedFieldMapping[column].toUpperCase() != 'ACTIVATIONDATE' || bReadOnly)
str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div>' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : '') + '</div></td>';
else
str += '<td title="Inserire la data nel formato gg/mm/aaaa (click per inserimento)" class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div contenteditable="true" ' + (eval('d[i].' + orderedFieldMapping[column]) != null ? '' : 'class="emptyPlaceholder" ') + 'onmouseup="javascript:SelectActivationDateText(this);" onblur="javascript:RestoreCellStyle(this);">' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : emptyTextString) + '</div></td>';
}
str += '</tr>';
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [total, $(str)];
}
},
ajaxObject: {
dataType: 'json'
},
// output string - default is '{page}/{totalPages}';
// possible variables:
// {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at
// either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 20,
//Reset pager to this page after filtering; set to desired page number (zero-based index), or false to not change page at filter start (Updated v2.16).
pageReset: false,
// 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,
// css class names of pager arrows
// next page arrow
cssNext: '.next',
// previous page arrow
cssPrev: '.prev',
// go to first page arrow
cssFirst: '.first',
// go to last page arrow
cssLast: '.last',
// select dropdown to allow choosing a page
cssGoto: '.gotoPage',
// location of where the "output" is displayed
cssPageDisplay: '.pagedisplay',
// dropdown that sets the "size" option
cssPageSize: '.pagesize',
// class added to arrows when at the extremes
// (i.e. prev/first arrows are "disabled" when on the first page)
// Note there is no period "." in front of this class name
cssDisabled: 'disabled'
}).children('tbody').on('editComplete', 'td', function() {
var $this = $(this),
//$allRows = $this.closest('table')[0].config.$tbodies.children('tr'),
newContent = $this.text(),
/*cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
rowIndex = $allRows.index($this.closest('tr')),*/
id = $this.closest('tr').find('td.ID').text();
$.ajax({
type: "POST",
crossDomain: true,
url: '/application/vlansummarys/update/' + id,
data: JSON.stringify({ activationDate: newContent }),
dataType: "text",
contentType: "application/json; charset=utf-8",
error: function(xhr, textStatus, errorThrown) {
alert("Errore durante l'inserimento: il dato inserito non è corretto. Contattare sistemi informativi se si ritiene che il messaggio d'errore sia sbagliato.");
},
success: function(data, textStatus, xhr) {
//console.log(xhr);
if ($this.find('div').hasClass('emptyPlaceholder'))
$this.find('div').removeClass('emptyPlaceholder');
},
});
});
}
函数加载表（）{
$（“#表”）.tablesorter({
主题：“引导”，
//是的，
斑马：[
“甚至”，
“奇数”]，
日期格式：“ddmmyyyy”，
headerTemplate:“{content}”，
排序列表：[[10,0]，[8,0]，[7,0]，//由AdR del Kit ASC、AdR ASC、Centrale ASC订购
是的，
小部件：bReadOnly？['zebra'，'columns'，'filter'，'uitheme']：['zebra'，'columns'，'filter'，'uitheme'，'editable']，
widgetOptions：{
filter\u columnFilters:true，
过滤器\u cssFilter:arrHeaderFields，
可编辑列：（bReadOnly？null:[21]），//或“0-2”（v2.14.2）；指向要编辑的列（基于零的索引）
可编辑_entertoaccpt:true，//按enter键接受内容，如果为false，则单击外部
可编辑_autoAccept:false，//自动接受对表格单元格所做的任何更改（v2.17.6）
可编辑_autoResort:false，//内容更改后自动度假。
可编辑的\u noEdit:'不可编辑'，//不可编辑单元格的类名
editable_editComplete:'editComplete'，//在编辑表内容后激发的事件
可编辑_validate:null，//返回有效字符串：函数（文本，原始）{return text；}
可编辑：空，/*函数（txt，columnIndex，$element）{
//$element是div，而不是td
//要获取td，请使用$element.nexist（'td'）
//$element.addClass（'focused'）；
$element.removeClass（“emptyPlaceholder”）；
//选择ActivationDateText（$element.closest（'td'））；
},*/
可编辑模糊：空，/*函数（txt，columnIndex，$element）{
//$element是div，而不是td
//要获取td，请使用$element.nexist（'td'）
//$element.removeClass（'focused'）；
RestoreCellStyle（$元素）；
},*/
可编辑\u selectAll:null，/*true，函数（txt，columnIndex，$element）{
//注意$element是表单元格内的div，因此使用$element.nestest（'td'）获取单元格
//仅当内容以字母“B”开头时才选择元素中的所有内容
//return/^b/i.test（txt）和&columnIndex==0；
},*/
可编辑的\u wrapContent:null，//''，//包装所有可编辑的单元格内容…使此小部件在IE中工作，并具有自动完成功能
/*对_轴进行重新排序：“x”/“x”或“xy”
再订购延迟：300，
reorder_helperClass:“表排序器reorder helper”，
reorder_helperBar:“表排序器reorder helper bar”，
reorder_noReorder:“reorder false”，
reorder_blocked:“reorder block left reorder block end”，
重新排序_完成：null//回调*/
},
}).表排序器({
//以寻呼机标记为目标-请参阅下面的HTML块
容器：$（“.pager”），
//使用此url格式“http:/mydatabase.com？page={page}&size={size}”
ajaxUrl:“/application/vlansummarys？page={page}&size={size}&{sortList:col}&{filterList:fcol}”，
//在应用所有处理后修改url
customAjaxUrl:函数（表，url）{return url；}，
ajaxProcessing：函数（数据）{
if（data&&data.hasOwnProperty（'rows'））{
var str=“”，d=data.rows，
//总行数（必需）
总计=data.total\u行，
//len应匹配寻呼机设置大小（c.size）
len=d.长度；
对于（变量i=0；i