使用 ajax 的 YUI 数据表
我开发了一个显示人员表（YUI 数据表）并具有搜索框的 asp 页面。如果在搜索框中搜索数据，则使用ajax回发更新数据表。
<html>
<head>
<title>Testing Datatable</title>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/datatable.css">
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></script>
<style type="text/css">
/* basic skin styles */
.yui-skin-sam .yui-dt table {
margin:0;
padding:0;
font-family:arial;font-size:inherit;
border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */
border:0;
}
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt th a {
font-weight:normal;
text-decoration:none;
color:#000; /* header text */
vertical-align:bottom;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt th {
margin:0;
padding:0;
border:0;
border-top: 1px Solid #CCCCCC;
border-bottom: 1px Solid #CCCCCC;
font-weight: bold;
}
.yui-skin-sam .yui-dt tr.yui-dt-first td {
border:0; /* tbody top border */
border-bottom: 1px Solid #CCCCCC;
}
.yui-skin-sam .yui-dt th .yui-dt-liner {
white-space:nowrap;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt-coltarget {
width: 5px;
}
.yui-skin-sam .yui-dt td {
margin:0;
padding:0;
border:none;
border-bottom: 1px Solid #CCCCCC;
text-align:left;
}
/* sortable columns */
.yui-skin-sam thead .yui-dt-sortable {
cursor:pointer;
}
.yui-skin-sam th.yui-dt-asc,
.yui-skin-sam th.yui-dt-desc {
background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */
background-color:#EEEEFF;
}
/* striping */
.yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam tr.yui-dt-odd { background-color:#F9F9F9; } /* light blue */
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#FFF; } /* light blue sorted */
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* dark blue sorted */
/* disable striping in list mode */
.yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
</style>
</head>
<body class="yui-skin-sam">
<input type="text" id="Search" /><input type="button" value="Search" onclick="myDataTable.AjaxSearch();" />
<div id="PersonContainer">
<table id="PersonTable">
<tr>
<td>Mg Mg</td>
<td>22</td>
<td>Factory Worker</td>
</tr>
<tr>
<td>Ko Ko</td>
<td>21</td>
<td>General Worker</td>
</tr>
<tr>
<td>Aung Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Aung Ko</td>
<td>22</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Mg Aye</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Min Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
</table>
</div>
<script type="text/javascript">
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("PersonTable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
myDataTable.AjaxSearch = function(){
var sUrl = "AjaxTest1.asp";
var callback = {
success: function(o) {
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(o.responseText,"text/xml");
}
else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(o.responseText);
}
var myDataSource = new YAHOO.util.DataSource(xmlDoc);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
alert(o.responseText);
myDataSource.responseSchema = {
resultNode: "person",
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
},
failure: function(o) {
alert("AJAX doesn't work"); //FAILURE
}
}
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback);
};
</script>
</body>
</html>
即返回xml数据：
<?xml version=""1.0""?>
<person><Name>Aung Aung</Name><Age>25</Age><Occupation>Developer</Occupation></person>
<person><Name>Mg Mg</Name><Age>20</Age><Occupation>Programmer</Occupation></person>
返回数据为两行。但数据表显示一行。我该如何执行此操作以显示返回行？
I developed a asp page that is showing persons table(YUI datatable) and has search box. If the data is searched in search box, the datatable is updated with ajax postback.
<html>
<head>
<title>Testing Datatable</title>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/datatable.css">
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></script>
<style type="text/css">
/* basic skin styles */
.yui-skin-sam .yui-dt table {
margin:0;
padding:0;
font-family:arial;font-size:inherit;
border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */
border:0;
}
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt th a {
font-weight:normal;
text-decoration:none;
color:#000; /* header text */
vertical-align:bottom;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt th {
margin:0;
padding:0;
border:0;
border-top: 1px Solid #CCCCCC;
border-bottom: 1px Solid #CCCCCC;
font-weight: bold;
}
.yui-skin-sam .yui-dt tr.yui-dt-first td {
border:0; /* tbody top border */
border-bottom: 1px Solid #CCCCCC;
}
.yui-skin-sam .yui-dt th .yui-dt-liner {
white-space:nowrap;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt-coltarget {
width: 5px;
}
.yui-skin-sam .yui-dt td {
margin:0;
padding:0;
border:none;
border-bottom: 1px Solid #CCCCCC;
text-align:left;
}
/* sortable columns */
.yui-skin-sam thead .yui-dt-sortable {
cursor:pointer;
}
.yui-skin-sam th.yui-dt-asc,
.yui-skin-sam th.yui-dt-desc {
background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */
background-color:#EEEEFF;
}
/* striping */
.yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam tr.yui-dt-odd { background-color:#F9F9F9; } /* light blue */
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#FFF; } /* light blue sorted */
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* dark blue sorted */
/* disable striping in list mode */
.yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
</style>
</head>
<body class="yui-skin-sam">
<input type="text" id="Search" /><input type="button" value="Search" onclick="myDataTable.AjaxSearch();" />
<div id="PersonContainer">
<table id="PersonTable">
<tr>
<td>Mg Mg</td>
<td>22</td>
<td>Factory Worker</td>
</tr>
<tr>
<td>Ko Ko</td>
<td>21</td>
<td>General Worker</td>
</tr>
<tr>
<td>Aung Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Aung Ko</td>
<td>22</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Mg Aye</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Min Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
</table>
</div>
<script type="text/javascript">
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("PersonTable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
myDataTable.AjaxSearch = function(){
var sUrl = "AjaxTest1.asp";
var callback = {
success: function(o) {
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(o.responseText,"text/xml");
}
else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(o.responseText);
}
var myDataSource = new YAHOO.util.DataSource(xmlDoc);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
alert(o.responseText);
myDataSource.responseSchema = {
resultNode: "person",
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
},
failure: function(o) {
alert("AJAX doesn't work"); //FAILURE
}
}
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback);
};
</script>
</body>
</html>
That is return xml data:
<?xml version=""1.0""?>
<person><Name>Aung Aung</Name><Age>25</Age><Occupation>Developer</Occupation></person>
<person><Name>Mg Mg</Name><Age>20</Age><Occupation>Programmer</Occupation></person>
The return data is two rows. But the datatable showed one row. How can I do this to show return rows?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定这是否相关，但我见过一些情况，如果没有提供 ID，YUI 就会补一个。在这些情况下，我们会看到由于关闭此 ID 而导致行丢失。我的第一个想法是为 Id 添加一个字段或列定义，然后在返回的 XML 数据中包含一个唯一的 Id。
I am not sure if this is related, but I have seen a few cases where if an ID was not provided, YUI just makes one up. In those scenarios we have seen missing rows due to it keying off of this Id. The first idea I would have would be to add a field or column def for Id and then include a unique Id in the returned XML data.