When you sort the tables using list.js, everything in the table disappears.I wonder why...
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxt2MZw1T"crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<scriptsrc="../scripts/script.js"></script>
<body>
<divid='itemlist'>
<button class='sort desc'data-sort='date'>Sort By Date</button>
<table>
<tbody class='list'>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script type='text/javascript'>
var options = {
// Target data to search for
valueNames: ['date', 'elem']
};
// Target ID
variableList = new List ('itemlist', options);
</script>
</body>
</html>
$(function(){
var url = ["all-c_int.xml", "all-dom.xml" ];
varfeed = new Object();
$.each(url, function(index,value){
$.ajax({
url —value,
type: "GET",
dataType: "xml",
timeout —1000,
xhrFields: {
withCredentials —true
},
cache: false,
error: function() {
alert("Failed to load XML";
},
success:function(xml){
$(xml).find("item").each(function(){
variable_link=$(this).find("link").text();
variable_title=$(this).find("title").text();
variable_desc=$(this).find("description").text();
variable_date=dateParse($(this).find('pubDate').text());
feed [item_date]="<tr><td class='date'>"+item_date+"</td>td class='elem'>>a href='+item_link+'>"+item_title+">>>>>>>>>>
if(item_title!="")$(feed[item_date]).appendTo("tbody");
});
}
});
});
function dateParse(str){
vardateObject = new Date(str);
year=dateObject.getFullYear();
month=dateObject.getMonth();
day=dateObject.getDate();
hour = dateObject.getHours();
minute=dateObject.getMinutes();
second=dateObject.getSeconds();
if(month<10) {month="0"+month;}
if(day<10) {day="0"+day;}
if(hour<10) {hout="0"+hour;}
if(minute<10) {minute="0"+minute;}
if(second<10) {second="0"+second;}
return year+"/"+month+"/"+day+"+hour+":"+minute+":"+second+"";
}
});
The problem is that itemList initializes earlier than the table initializes.
You should erase the code (<script type='text/javascript'>>~</script>) written in HTML and use script.js as follows:
$(function(){
var url = ["all-c_int.xml", "all-dom.xml" ];
varfeed = new Object();
function dateParse(str){
vardateObject = new Date(str);
year=dateObject.getFullYear();
month=dateObject.getMonth();
day=dateObject.getDate();
hour = dateObject.getHours();
minute=dateObject.getMinutes();
second=dateObject.getSeconds();
if(month<10) {month="0"+month;}
if(day<10) {day="0"+day;}
if(hour<10) {hout="0"+hour;}
if(minute<10) {minute="0"+minute;}
if(second<10) {second="0"+second;}
return year+"/"+month+"/"+day+"+hour+":"+minute+":"+second+"";
}
variableCount = 0;
function loadEnded() {
endCount++;
if(endedCount>=url.length){
window.options={
// Target data to search for
valueNames: ['date', 'elem']
};
// Target ID
window.itemList=newList('itemlist', options);
}
}
$.each(url, function(index,value){
$.ajax({
url —value,
type: "GET",
dataType: "xml",
timeout —1000,
xhrFields: {
withCredentials —true
},
cache: false,
error: function() {
alert("Failed to load XML";
loadEnded();
},
success:function(xml){
$(xml).find("item").each(function(){
variable_link=$(this).find("link").text();
variable_title=$(this).find("title").text();
variable_desc=$(this).find("description").text();
variable_date=dateParse($(this).find('pubDate').text());
feed [item_date]="<tr><td class='date'>"+item_date+"</td>td class='elem'>>a href='+item_link+'>"+item_title+">>>>>>>>>>
if(item_title!="")$(feed[item_date]).appendTo("tbody");
});
loadEnded();
}
});
});
});
© 2024 OneMinuteCode. All rights reserved.