- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
背景:我有一个包含小部件的小型 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 以及一般的 Web 开发只有几个月的新手。我也为我糟糕的英语道歉。
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;
}
最佳答案
Datatables 有一个丰富的 API (http://datatables.net/api),可以在保持排序的同时添加、删除和更新行。在您的情况下,新数据可能需要删除 XML 中不再存在的行、更新现有行以及添加 XML 中但不在表中的新行。
可能最简单的方法是调用 fnClearTable 删除所有当前行并使用 fnAddData 添加 XML 中的所有行:
var oTable = $('#example').dataTable();
oTable.fnClearTable();
$xml.find("row").each(function(index){
var $cells = $(this).find("cell");
var c1 = $cells.eq(0).text();
var c2 = $cells.eq(1).text();
var c3 = $cells.eq(2).text();
oTable.fnAddData( [c1, c2, c3]);
});
关于javascript - 刷新表后排序和搜索数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22938579/
我有一台 MySQL 服务器和一台 PostgreSQL 服务器。 需要从多个表中复制或重新插入一组数据 MySQL 流式传输/同步到 PostgreSQL 表。 这种复制可以基于时间(Sync)或事
如果两个表的 id 彼此相等,我尝试从一个表中获取数据。这是我使用的代码: SELECT id_to , email_to , name_to , status_to
我有一个 Excel 工作表。顶行对应于列名称,而连续的行每行代表一个条目。 如何将此 Excel 工作表转换为 SQL 表? 我使用的是 SQL Server 2005。 最佳答案 这取决于您使用哪
我想合并两个 Django 模型并创建一个模型。让我们假设我有第一个表表 A,其中包含一些列和数据。 Table A -------------- col1 col2 col3 col
我有两个表:table1,table2,如下所示 table1: id name 1 tamil 2 english 3 maths 4 science table2: p
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 1 年前。 Improve th
下面两个语句有什么区别? newTable = orginalTable 或 newTable.data(originalTable) 我怀疑 .data() 方法具有性能优势,因为它在标准 AX 中
我有一个表,我没有在其中显式定义主键,它并不是真正需要的功能......但是一位同事建议我添加一个列作为唯一主键以随着数据库的增长提高性能...... 谁能解释一下这是如何提高性能的? 没有使用索引(
如何将表“产品”中的产品记录与其不同表“图像”中的图像相关联? 我正在对产品 ID 使用自动增量。 我觉得不可能进行关联,因为产品 ID 是自动递增的,因此在插入期间不可用! 如何插入新产品,获取产品
我有一个 sql 表,其中包含关键字和出现次数,如下所示(尽管出现次数并不重要): ____________ dog | 3 | ____________ rat | 7 | ____
是否可以使用目标表中的LAST_INSERT_ID更新源表? INSERT INTO `target` SELECT `a`, `b` FROM `source` 目标表有一个自动增量键id,我想将其
我正在重建一个搜索查询,因为它在“我看到的”中变得多余,我想知道什么 (albums_artists, artists) ( ) does in join? is it for boosting pe
以下是我使用 mysqldump 备份数据库的开关: /usr/bin/mysqldump -u **** --password=**** --single-transaction --databas
我试图获取 MySQL 表中的所有行并将它们放入 HTML 表中: Exam ID Status Assigned Examiner
如何查询名为 photos 的表中的所有记录,并知道当前用户使用单个查询将哪些结果照片添加为书签? 这是我的表格: -- -- Table structure for table `photos` -
我的网站都在 InnoDB 表上运行,目前为止运行良好。现在我想知道在我的网站上实时发生了什么,所以我将每个页面浏览量(页面、引荐来源网址、IP、主机名等)存储在 InnoDB 表中。每秒大约有 10
我在想我会为 mysql 准备两个表。一个用于存储登录信息,另一个用于存储送货地址。这是传统方式还是所有内容都存储在一张表中? 对于两个表...有没有办法自动将表 A 的列复制到表 B,以便我可以引用
我不是程序员,我从这个表格中阅读了很多关于如何解决我的问题的内容,但我的搜索效果不好 我有两张 table 表 1:成员 id*| name | surname -------------------
我知道如何在 ASP.NET 中显示真实表,例如 public ActionResult Index() { var s = db.StaffInfoDBSet.ToList(); r
我正在尝试运行以下查询: "insert into visits set source = 'http://google.com' and country = 'en' and ref = '1234
我是一名优秀的程序员,十分优秀!