JQueryMobile filtering a XMLhttprequest

JQueryMobile filtering a XMLhttprequest

本文关键字：XMLhttprequest filtering JQueryMobile      更新时间：2023-09-26

我很难让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>');

您没有在创建表后初始化jQuery Mobile小部件(表和过滤器)。下面是如何做的一个例子。

给定一个带有过滤器输入和表空容器的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"的表，继续创建head和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

相关文章：