纠纷调解组织
金融纠纷调解组织联系方式
// 全局状态管理
var state = {
currentPage: 1,
pageSize: 20,
totalItems: 0,
originalData: []
};
var paginationConfig = {
showTotal: true,
pageSizes: [20],
maxVisiblePages: 5
};
// 添加分页样式到页面
var style = document.createElement('style');
style.textContent =
'.pagination-container {' +
' display: flex;' +
' justify-content: center;' +
' align-items: center;' +
' margin: 20px 0;' +
' flex-wrap: wrap;' +
'}' +
'' +
'.page-controls {' +
' display: flex;' +
' align-items: center;' +
'}' +
'' +
'.page-buttons {' +
' display: flex;' +
'}' +
'' +
'.page-item {' +
' min-width: 32px;' +
' height: 32px;' +
' display: flex;' +
' justify-content: center;' +
' align-items: center;' +
' padding: 0 8px;' +
' background: #f5f7fa;' +
' color: #5a6c84;' +
' border-radius: 4px;' +
' cursor: pointer;' +
' font-weight: 500;' +
' transition: all 0.2s ease;' +
' border: none;' +
'}' +
'' +
'.page-item:hover:not(.active):not([disabled]) {' +
' background: #e1e7f0;' +
' color: #2c3e50;' +
'}' +
'' +
'.page-item.active {' +
' background: #dc1d22;' + // #3498db
' color: white;' +
'}' +
'' +
'.page-item[disabled] {' +
' opacity: 0.5;' +
' cursor: not-allowed;' +
' color: #a0aec0;' +
'}' +
'' +
'.ellipsis {' +
' display: flex;' +
' align-items: center;' +
' justify-content: center;' +
' width: 32px;' +
' height: 32px;' +
' color: #718096;' +
'}' +
'' +
'.page-size-selector {' +
' display: none;' +
' padding: 5px 8px;' +
' border: 1px solid #e2e8f0;' +
' border-radius: 4px;' +
' background: white;' +
' color: #4a5568;' +
' cursor: pointer;' +
'}' +
'' +
'.total-info {' +
' font-size: 14px;' +
' color: #4a5568;' +
' padding: 6px 12px;' +
' border-radius: 4px;' +
' font-weight: 500;' +
'}' +
'' +
'@media (max-width: 768px) {' +
' .pagination-container {' +
' flex-direction: column;' +
' }' +
'}' +
'' +
'/* 基础表格样式 */' +
'#mechanismList {' +
' width: 100%;' +
' border-radius: 10px;' +
' overflow: hidden;' +
' display: inline-block;' +
'}' +
''+
'/* 基础表格样式 */' +
'#mechanismList table {' +
' width: 100%;' +
' border-collapse: collapse;' +
'}' +
''+
'/* 特定于IE11的样式 */'+
'@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {'+
' #mechanismList table {'+
' width: 100% !important; '+ // 确保IE11中表格宽度为100%
' border-radius: 10px;' +
' }'+
'}'+
'' +
'/* 城市组顶部粗分割线 */' +
'tr.group-start{' +
' border-top: 2px solid #eef1f5;' +
'}' +
'/* 城市组底部粗分割线 */' +
'tr.group-end > td {' +
' border-bottom: 2px solid #eef1f5;' +
'}' +
'' +
'/* 表头样式 */' +
'#mechanismList thead th {' +
' background: #dc1d22;' +
' color: white;' +
' font-weight: 600;' +
' padding: 16px 12px;' +
' text-align: center;' +
' position: relative;' + // IE11不支持sticky
'}' +
''+
'/* 表格单元格样式 */' +
'#mechanismList td {' +
' padding: 14px 12px;' +
' border-bottom: 1px solid #eef1f5;' +
'}' +
'' +
'/* 行合并单元格特殊样式 */' +
'#mechanismList td[rowspan] {' +
' background-color: #f8fafc;' +
' font-weight: bold;' +
' color: #2c3e50;' +
' vertical-align: middle;' +
' text-align: center;' +
' font-size: 1em;' +
'}' +
'' +
'/* 斑马纹效果 */' +
'#mechanismList tbody tr:nth-child(even) {' +
' background-color: #f9fbfd;' +
'}' +
'' +
'/* 悬停效果 */' +
'#mechanismList tbody tr:hover td {' +
' background-color: #edf7ff;' +
'}' +
'' +
'' +
'/* 空数据提示样式 */' +
'.no-data {' +
' text-align: center;' +
' color: #95a5a6;' +
' font-style: italic;' +
' padding: 30px !important;' +
' background-color: #fcfdfe;' +
'}' +
'' +
'/* 响应式设计 */' +
'@media (max-width: 768px) {' +
' #mechanismList table {' +
' display: block;' +
' overflow-x: auto;' +
' }' +
' #mechanismList th, ' +
' #mechanismList td {' +
' min-width: 120px;' +
' }' +
'}';
document.head.appendChild(style);
// IE11兼容的forEach
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function');
}
if (arguments.length > 1) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
// 省份
$("#province").change(function(){
$("#district").html("
");
var parentId = $("#province").val();
var options = "
";
if (parentId != 0) {
getRegion(parentId, $("#city"), options);
} else {
$("#city").html(options);
}
})
// 城市
$("#city").change(function(){
var parentId = $("#city").val();
var options = "
"
if (parentId != 0) {
getRegion(parentId, $("#district"), options);
} else {
$("#district").html(options)
}
})
function getRegion(parentId, obj, options) {
$.ajax({
url:"/Fos/getRegion?parentId=" + parentId,
success:function(result){
var data = JSON.parse(result);
for (var i = 0; i < data.length; i++) {
options += "
";
}
obj.html(options);
}
});
}
// 搜索机制
$("#searchMechanism").click(function() {
var provinceId = $("#province").val();
var cityId = $("#city").val();
$.ajax({
url: "/Fos/getList?provinceId=" + provinceId + "&cityId=" + cityId,
dataType: "json",
success: function(result) {
// 更新状态数据
state.originalData = result;
state.currentPage = 1;
state.totalItems = state.originalData.length;
// 重新渲染
renderTable();
renderPagination();
}
});
});
// 渲染表格
function renderTable() {
var tbody = document.getElementById("tbody");
tbody.innerHTML = "";
var currentData = getCurrentPageData();
if (currentData.length === 0) {
tbody.innerHTML = '
| 暂无数据 |
';
return;
}
// 计算行合并
var rowspans = {};
var lastCity = null;
var count = 0;
var startIndex = 0;
for (var i = 0; i < currentData.length; i++) {
var item = currentData[i];
if (item.city !== lastCity) {
if (lastCity !== null) {
rowspans[startIndex] = count;
}
lastCity = item.city;
count = 1;
startIndex = i;
} else {
count++;
}
}
if (lastCity !== null) {
rowspans[startIndex] = count;
}
// 渲染表格行
for (var index = 0; index < currentData.length; index++) {
var item = currentData[index];
var row = document.createElement("tr");
if (rowspans.hasOwnProperty(index)) {
row.innerHTML =
'
' + item.city + ' | ' +
'
' + item.fosname + ' | ' +
'
' + item.phone + ' | ' +
'
' + item.address + ' | ';
row.className = "group-start"; // 添加标识类
} else {
row.innerHTML =
'
' + item.fosname + ' | ' +
'
' + item.phone + ' | ' +
'
' + item.address + ' | ';
row.className = "group-end"; // 添加标识类
}
tbody.appendChild(row);
}
}
// 获取页码
function getCurrentPageData() {
// 确保originalData是数组
if (!Array.isArray(state.originalData)) {
console.error("state.originalData is not an array", state.originalData);
return [];
}
var start = (state.currentPage - 1) * state.pageSize;
var end = start + state.pageSize;
return state.originalData.slice(start, end);
}
// 创造页码按钮
function createButton(text, isActive, isDisabled, targetPage) {
var classNames = 'page-item';
if (isActive) {
classNames += ' active';
}
var disabledAttr = isDisabled ? 'disabled' : '';
return '
';
}
// 分页渲染核心
function renderPagination() {
var total = state.totalItems;
var totalPages = Math.max(Math.ceil(total / state.pageSize), 1);
state.currentPage = Math.min(Math.max(state.currentPage, 1), totalPages);
var pages = generatePages(state.currentPage, totalPages);
var pageSizeOptions = '';
for (var i = 0; i < paginationConfig.pageSizes.length; i++) {
var size = paginationConfig.pageSizes[i];
var selected = size === state.pageSize ? 'selected' : '';
pageSizeOptions += '
';
}
var paginationHTML = '';
document.getElementById("pagination").innerHTML = paginationHTML;
}
// 分页生成逻辑
function generatePages(currentPage, totalPages, visibleEdges, aroundCurrent) {
if (visibleEdges === undefined) visibleEdges = 2;
if (aroundCurrent === undefined) aroundCurrent = 1;
var pages = [];
var leftEnd = Math.min(visibleEdges, totalPages);
var rightStart = Math.max(totalPages - visibleEdges + 1, leftEnd + 1);
for (var i = 1; i <= leftEnd; i++) pages.push(i);
var midStart = Math.max(leftEnd + 1, currentPage - aroundCurrent);
var midEnd = Math.min(rightStart - 1, currentPage + aroundCurrent);
if (midStart > leftEnd + 1) pages.push('...');
for (var i = midStart; i <= midEnd; i++) pages.push(i);
if (midEnd < rightStart - 1) pages.push('...');
for (var i = rightStart; i <= totalPages; i++) pages.push(i);
// 去重
var uniquePages = [];
for (var i = 0; i < pages.length; i++) {
if (i === 0 || pages[i] !== pages[i-1]) {
uniquePages.push(pages[i]);
}
}
return uniquePages;
}
// 事件委托处理
function handlePaginationEvents() {
document.body.addEventListener('click', function(e) {
var target = e.target || e.srcElement;
if (target.classList.contains('page-item') && !target.disabled) {
var newPage = parseInt(target.getAttribute('data-page'));
if (!isNaN(newPage)) {
state.currentPage = newPage;
renderTable();
renderPagination();
}
}
});
document.addEventListener('change', function(e) {
var target = e.target || e.srcElement;
if (target.classList.contains('page-size-selector')) {
var newSize = parseInt(target.value);
if (!isNaN(newSize)) {
updatePageSize(newSize);
}
}
});
}
// 分页尺寸更新函数
function updatePageSize(newSize) {
if (!Number.isInteger(newSize)) return;
state.pageSize = newSize;
state.currentPage = 1;
renderTable();
renderPagination();
}
function nl2br(str) {
if (typeof str !== 'string') {
return '';
}
// 使用正则表达式匹配所有的 \r\n、\n 和 \r 并将其替换成
标签
return str.replace(/(\r\n|\n|\r)/g, '
');
}
