Сортировка и поиск в таблицах данных после обновления таблицы
ФОН: У меня есть небольшое приложение jquery, которое содержит виджеты. В этом приложении есть 2 типа виджетов, и это виджеты счетчиков и виджеты сетки. Для виджетов сетки я используюDataTables.
Мое приложение в основном подключается к серверу и получает различную информацию, такую как имена виджетов и значения для счетчиков и виджетов сетки. На основании полученной информации я динамически создаю страницы для каждого виджета. В настоящее время все работает хорошо, но я столкнулся с небольшой проблемой.
проблема Вопрос, который у меня есть сейчас, связан с моими виджетами сетки, которые используют dataTables api. С моего сервера я получаю информацию сетки в этом формате.
**//EXAMPLE INPUT
/*
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<column width="55" type="ro" align="left" sort="str">Player</column>
<column width="55" type="ro" align="left" sort="str">State</column>
<column width="55" type="ro" align="left" sort="str">Points</column>
</head>
<row id="1">
<cell>Lebron King James</cell>
<cell>Best Mode</cell>
<cell>45</cell>
</row>
</rows>
*/**
Затем я анализирую это и вставляю в таблицы. Проблема в том, что я делаю обновление каждые 3 секунды, так как данные для сетки обновляются в режиме реального времени. Поэтому, когда я делаю обновление, мой фильтр поиска и сортировка сбрасываются.
Так, например, ниже, если я сортирую по наивысшим баллам
PLAYER POINTS
KING JAMES 45
DERRICK ROSE 30
UPDATE HAPPENS AND MY SORTING WILL GET REST TO THIS
PLAYER POINTS
DERRICK ROSE 30
KING JAMES 45
МОЙ HTML-КОД
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<title>
NBA Fanatico
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/tdMobile.min.css" type="text/css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="cssfinal/style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script src="dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<!-- MAIN JS SCRIPT CONTANS CODE FOR COUTNER WIDGETS, TABLES , AJAX REQUEST FOR GETTING DATA-->
<script src="dynamic.js" type="text/javascript"></script>
<!-- SCRIPTS FOR DATA TABLES -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" /><!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="page1">
<div data-role="content" data-theme="a">
<div class="login-box" id="login">
<div id="loginprompt">
<div id="header">
<h3>
Basketball Fanatico
</h3>
</div>
</div>
<form method="get">
<div id="username" data-role="fieldcontain">
<input type="text" name="username" placeholder="Username" />
</div>
<div id="password" data-role="fieldcontain">
<input type="password" name="password" id="txtId" placeholder="Password" />
</div>
<div id="loginbtn">
<a data-role="button" id="log" data-theme="a" href="#page2" data-transition="slide">LOGIN</a>
</div>
</form><br />
</div>
</div>
</div><!-- PAGE 2 -->
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-theme="a">
<a data-iconpos="notext" href="#panel" data-role="button" data-icon="bars"></a>
<h1 class="ui-title" role="heading">
Basketball Fanatico
</h1>
<div class="ui-btn-right" data-type="horizontal">
<a data-iconpos="notext" href="#page2" data-role="button" data-icon="home"></a> <a data-iconpos="notext" href="#page1" data-role="button" data-icon="delete"></a>
</div>
</div>
<div data-role="content" id="page2content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="a">WELCOME!
</li>
<li>Use the menu on the left to navigate<br />
and configure the various options.
</li>
</ul>
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="push">
<!-- <div> -->
<div id="nav">
<h3>
Navigation
</h3>
<hr />
<label><input id="chkSort" type="checkbox" checked="true" />Allow sorting</label>
<hr />
</div>
<div id="items" data-role="button">
<!-- Insert Parsed Widget Names Here -->
<a href="#page1" data-transition="fade" data-theme="a" data-role="button">LOG OUT</a>
</div><!-- </div> -->
</div>
</body>
</html>
МОЙ JS
var widgetNames = new Array();
var widgetId = new Array();
var pageId = ''
$(document).on("pagecreate", function () {
$("body > [data-role='panel']").panel().enhanceWithin();
});
$(document).on('pagecreate', '#page1', function () {
$("#log").on('click', function () {
$.ajax({
url: "script.login",
type: "GET",
data: {
'page': 'create_user',
'access': 'user',
'username': $("input[name='username']").val(),
'password': $("input[name='password']").val()
},
dataType: "text",
success: function (html) {
widgetNames = new Array();
widgetId = new Array();
var res = html.match(/insertNewChild(.*);/g);
//Get each widget name and ID and assign to values in an array
for (var i = 0; i < res.length; i++) {
//alert(res[i]);
var temp = res[i].split(',');
if (temp.length >= 3) {
widgetNames[i] = (temp[2].replace('");', '')).replace('"', '');
widgetId[i] = temp[1].replace("'", "").replace("'", "").replace(/ /g, '');
}
}
var AllWidgets = ''
var testwidget = new Array();
//Loop through the html returned and get the data relevant to each widget... save in temp array
var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);
for (var i = 0; i < tempWidgetContent.length; i++) {
var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{') + 1);
testwidget[i] = widgetContent.replace("site +", "");
//replace the code for a grids...
if (testwidget[i].indexOf('grid') > 0) {
testwidget[i] = CreateGridUpdateFunction(testwidget[i], i);
}
}
var widgetPart = new Array();
//Assume we have widget names, ids, and loading data in 3 arrays
//Loop through and create the necessary page.
for (var i = 0; i < widgetNames.length; i++) {
if (testwidget[i].indexOf('hi') > -1) {
//Header FOR grid Widget Page
var pageHeaderPart = "<div data-role= 'page' id='" + widgetId[i] + "' data-pageindex='" + i + "' class='dynPageClass'><div data-role='header' id='header1' data-position='fixed' data-theme='a'><a href='#panel' data-icon='bars' data-iconpos='notext' class='ui-btn-left'></a><a href='#' data-icon='search' id='search' data-iconpos='notext' class='ui-btn-left' style='margin-left: 35px'></a><h1>Basketball Fanatico</h1><a href='#page1' data-icon='delete' data-iconpos='notext' class='ui-btn-right'></a><a href='#page2' data-icon='home' data-iconpos='notext' class='ui-btn-right' style='margin-right: 35px;'></a></div><div data-role='content'>";
} else {
//Header For Counter Widget Page
var pageHeaderPart = "<div data-role='page' id='" + widgetId[i] + "' data-pageindex='" + i + "' class='dynPageClass'><div data-role='header'data-position='fixed' data-theme='a'><a data-iconpos='notext' href='#panel' data-role='button'data-icon='bars'></a><h1 class='ui-title'role='heading'>Basketball Fanatico</h1><div class='ui-btn-right' data-type='horizontal'><a data-iconpos='notext' href='#page2' data-role='button'data-icon='home'style=\" margin-right:5px; \"></a><a data-iconpos='notext' href='#page1' data-role='button'data-icon='delete'></a></div></div><div data-role='content'>";
}
//Footer for all Widget Pages
var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";
if (testwidget[i].indexOf('hi') > -1) {
//Grid Page widget title
var check = "<div data-role='tbcontent'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>" + widgetNames[i] + "";
}
//Counter Page widget title
var check = "<div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>" + widgetNames[i] + "</div>";
if (testwidget[i].indexOf('counterValue') > 0) {
//Counter Content (actual value of the counter widget)
widgetPart[i] = '<DIV style=\" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;\" id=widgetContainer_' + widgetId[i] + '></DIV><SCRIPT>' + 'function UpdateWidgetDiv' + widgetId[i] + '() {' + testwidget[i] + '$(\"#widgetContainer_' + widgetId[i] + '").html(counterValue);' + '}' + '</SCRIPT>';
}
if (testwidget[i].indexOf('hi') > -1) {
//Grid content(actual values for the grid widget)
widgetPart[i] = '<DIV id=widgetContainer_' + widgetId[i] + '></DIV><SCRIPT>' + 'function UpdateWidgetDiv' + widgetId[i] + '() {' + testwidget[i] + '}' + '</SCRIPT>';
} else {
//Miscalenous content(these are counter widgets that will contain text messages for now just putting "i dont know what i am")
widgetPart[i] = '<DIV style=\" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;\" id=widgetContainer_' + widgetId[i] + '>I dont know what I am</DIV>';
}
AllWidgets += '<a href="#' + widgetId[i] + '" class="widgetLink" data-theme="b" data-role="button" >' + widgetNames[i] + '</a>';
var makePage = $(pageHeaderPart + check + widgetPart[i] + pageFooterPart);
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllWidgets).trigger('create');
//Widget Update Function
function UpdateActivePage() {
//get active page
pageId = $(":mobile-pagecontainer").pagecontainer('getActivePage').prop("id");
//figure out index
var idx;
for (var i = 0; i < widgetId.length; i++) {
if (widgetId[i] == pageId) {
idx = i;
break;
}
}
eval(testwidget[idx]);
$("#widgetContainer_" + pageId).html(counterValue);
$('#grid_' + idx).dataTable({
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": {
"sSearch": ""
}
});
$('.dataTables_filter input').attr("placeholder", "Search");
$('.dataTables_filter').css('float', 'none');
$('.dataTables_filter').css('padding-right', '0px');
$("#example_filter").detach().prependTo('#header1');
}
function CreateGridUpdateFunction(oldUpdatefunction, thisWidgetID) {
var updateLines = oldUpdatefunction.split("\n");
var updateFunctionCode = "";
for (var i = 0; i < updateLines.length; i++) {
if (updateLines[i].indexOf(" var url = ") > 0) {
//alert(updateLines[i]);
// updateFunctionCode = " try { ";
var updateURL = updateLines[i];
if (updateURL.indexOf("&windowWidth=") > 0) {
updateURL = updateURL.substr(0, updateURL.lastIndexOf("&windowWidth=")) + "';";
//console.log(updateURL);
}
updateFunctionCode += updateURL;
updateFunctionCode += " var loader = dhtmlxAjax.getSync(url);";
updateFunctionCode += " if(loader.xmlDoc.responseText.length > 0){";
updateFunctionCode += " counterValue = createTableStringFromXML(loader.xmlDoc.responseText," + thisWidgetID + ");";
updateFunctionCode += " } ";
}
}
return "var counterValue = \"hi\"; " + updateFunctionCode;
}
$(":mobile-pagecontainer").on("pagechange", function () {
UpdateActivePage();
})
setInterval(UpdateActivePage, 3000);
}
});
});
});
//Returns a bool indicated if the (space trimmed) string starts with needle.
function startsWith(searchString, searchVal) {
var search = searchString.trim();
return search.indexOf(searchVal) >= 0;
}
function createTableStringFromXML(serverXML, thisWidgetID) {
//EXAMPLE INPUT
/*
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<column width="55" type="ro" align="left" sort="str">Player</column>
<column width="55" type="ro" align="left" sort="str">State</column>
<column width="55" type="ro" align="left" sort="str">Points</column>
</head>
<row id="1">
<cell>Lebron James</cell>
<cell>Injured</cell>
<cell>25 </cell>
</row>
</rows>
*/
console.log(serverXML);
//PARSE THE ABOVE XML STRING to required FORMAT
var xmlLines = serverXML.split("\n");
var returnTable = "";
for (var i = 0; i < xmlLines.length; i++) {
if (startsWith(xmlLines[i], "<rows")) {
returnTable += "<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" class=\"display\" id=\"grid_" + thisWidgetID + "\" width=\"100%\">";
} else if (startsWith(xmlLines[i], "</rows>")) {
returnTable += "</tbody></table>";
} else if (startsWith(xmlLines[i], "<head>")) {
returnTable += "<thead><tr>";
} else if (startsWith(xmlLines[i], "</head>")) {
returnTable += "</tr></thead><tbody>";
} else if (startsWith(xmlLines[i], "<column")) {
returnTable += "<th>" + xmlLines[i].match(/>(.*?)</i)[1] + "</th>";
} else if (startsWith(xmlLines[i], "<row")) {
returnTable += "<tr>";
} else if (startsWith(xmlLines[i], "</row")) {
returnTable += "</tr>";
} else if (startsWith(xmlLines[i], "<cell")) {
returnTable += "<td>" + xmlLines[i].match(/>(.*?)</i)[1] + "</td>";
}
console.log(returnTable);
}
return returnTable;
}
Пожалуйста, совет, как исправить это, я застрял на этом в течение одной недели, теперь я извиняюсь, если этот вопрос плох, поскольку я только несколько месяцев плохо знаком с js, html и веб-разработкой в целом. Я также прошу прощения за мой плохой английский.
ОБНОВЛЕННЫЙ КОДЕКС EZ
Смотрите комментарии, которые начинаются с//EZ:
function UpdateActivePage() {
//get active page
pageId = $(":mobile-pagecontainer").pagecontainer('getActivePage').prop("id");
//figure out index
var idx;
for (var i = 0; i < widgetId.length; i++) {
if (widgetId[i] == pageId) {
idx = i;
break;
}
}
eval(testwidget[idx]);
if (counterValue == false) {
//EZ: no need to recreate datatable
return;
} else {
$("#widgetContainer_" + pageId).html(counterValue);
$('#grid_' + idx).dataTable({
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": {
"sSearch": ""
}
});
$('.dataTables_filter input').attr("placeholder", "Search");
$('.dataTables_filter').css('float', 'none');
$('.dataTables_filter').css('padding-right', '0px');
$("#example_filter").detach().prependTo('#header1');
}
}
function createTableStringFromXML(serverXML, thisWidgetID) {
//EXAMPLE INPUT
/*
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
<column width="55" type="ro" align="left" sort="str">Player</column>
<column width="55" type="ro" align="left" sort="str">State</column>
<column width="55" type="ro" align="left" sort="str">Points</column>
</head>
<row id="1">
<cell>Lebron James</cell>
<cell>Injured</cell>
<cell>25 </cell>
</row>
</rows>
*/
console.log(serverXML);
//PARSE THE ABOVE XML STRING to required FORMAT
var xmlLines = serverXML.split("\n");
var returnTable = "";
//EZ: See if table already exists
if ( $("#grid_" + thisWidgetID).length > 0){
//EZ: update table using the datatables API...
//EZ: then return false
return false;
} else {
for (var i = 0; i < xmlLines.length; i++) {
if (startsWith(xmlLines[i], "<rows")) {
returnTable += "<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" class=\"display\" id=\"grid_" + thisWidgetID + "\" width=\"100%\">";
} else if (startsWith(xmlLines[i], "</rows>")) {
returnTable += "</tbody></table>";
} else if (startsWith(xmlLines[i], "<head>")) {
returnTable += "<thead><tr>";
} else if (startsWith(xmlLines[i], "</head>")) {
returnTable += "</tr></thead><tbody>";
} else if (startsWith(xmlLines[i], "<column")) {
returnTable += "<th>" + xmlLines[i].match(/>(.*?)</i)[1] + "</th>";
} else if (startsWith(xmlLines[i], "<row")) {
returnTable += "<tr>";
} else if (startsWith(xmlLines[i], "</row")) {
returnTable += "</tr>";
} else if (startsWith(xmlLines[i], "<cell")) {
returnTable += "<td>" + xmlLines[i].match(/>(.*?)</i)[1] + "</td>";
}
console.log(returnTable);
}
}
return returnTable;
}