JQueryMobile過濾XMLhttprequest

Question

我很難讓JQueryMobile過濾器函數在我正在使用的腳本上工作。

我創建了一個簡單的xmlhttp請求，用於從175個條目和4列的XML文件中收集數據。輸出是好的。現在我不想過濾這張桌子。但是，當它連接起來沒有效果。

任何幫助表示讚賞

<script type="text/javascript"> 

xmlhttp=new XMLHttpRequest(); 
xmlhttp.open("GET","Issue.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 


    document.write('<table border="1" cellspacing="1" cellpadding="5">') 
    var Asset = xmlDoc.getElementsByTagName("Attribute"); 

    for (x = 0; x <= Asset.length; x++) //Asset.length 
      { 
      document.write("<tr>"); 
       document.write("<td>" + xmlDoc.getElementsByName("Number")[x].childNodes[0].nodeValue) + "</td>"; 
       document.write("<td>" + xmlDoc.getElementsByName("Name")[x].childNodes[0].nodeValue) + "</td>"; 
       document.write("<td>" + xmlDoc.getElementsByName("Address")[x].childNodes[0].nodeValue) + "</td>"; 
       document.write("<td>" + xmlDoc.getElementsByName("Phone")[x].childNodes[0].nodeValue) + "</td>"; 
      document.write("</tr>"); 
      } 

    document.write("</table>"); 
    </script> 

的XML：

<?xml version="1.0" encoding="UTF-8"?> 
<Assets pageSize="2222222" pageStart="0" total="175"> 
<Asset href="www.home1.com"> 
    <Attribute name="Number">123123123</Attribute> 
    <Attribute name="Name">asdqweqweqwe</Attribute> 
    <Attribute name="Address">dsffdfsdfdasfsda</Attribute> 
    <Attribute name="Phone">123123123</Attribute> 
</Asset> 
<Asset href="www.home2.com"> 
    <Attribute name="Number">4344433</Attribute> 
    <Attribute name="Name">ssssss</Attribute> 
    <Attribute name="Address">ddddd</Attribute> 
    <Attribute name="Phone">6666666</Attribute> 
</Asset> 
</Asset> 

工作表頭：

document.write('<table data-role="table" data-filter="true" data-input="#filterTable-input" id="thetable" class="ui-responsive table-stroke">'); 
    document.write('<thead><tr><th>Number</th><th>Name</th><th>Custom</th><th>Owner</th></tr></thead>'); 
    document.write('<tbody>'); 

Answer 1

你沒有初始化jQuery Mobile的小部件（TA創建表後創建一個表格。這是一個如何做到這一點的例子。

給出一個JQM頁面過濾器的輸入和表一個空的容器：

<div data-role="page" id="page1"> 
    <div data-role="header" data-position="fixed"> 
     <h1>My page</h1> 
    </div> 
    <div role="main" class="ui-content"> 
     <form> 
      <input id="filterTable-input" data-type="search" /> 
     </form> 
     <div id="tableContainer"> 
     </div> 
    </div> 
</div> 

你的腳本將創建data-filter="true"和data-input="#filterTable-input"表，繼續前進，創造THEAD和TBODY部分，並填寫使用您的XML的行。追加所創建的表空的容器後，用.table()和.filterable()初始化表和過濾部件：

$(document).on("pagecreate", "#page1", function(){  
    var thetable = '<table data-role="table" data-filter="true" data-input="#filterTable-input" id="thetable" class="ui-responsive table-stroke">';  
    thetable += '<thead><tr><th>Number</th><th>Name</th><th>Address</th><th>Address</th></tr></thead>'; 
    thetable += '<tbody>'; 
    for (x = 0; x <= 175; x++) { 
     thetable += '<tr>'; 
     thetable += '<td>' + x + 'a</td>' 
     thetable += '<td>' + x + 'b</td>' 
     thetable += '<td>' + x + 'c</td>' 
     thetable += '<td>' + x + 'd</td>' 
     thetable += '</tr>'; 
    } 
    thetable += '</tbody>'; 
    thetable += '</table>'; 

    $("#tableContainer").empty().append(thetable);  
    $("#thetable").table().filterable(); 
}); 

這裏是一個DEMO