Какой или какой плагин в jquery я должен использовать, чтобы заполнить HTML-таблицу содержимым XML-файла?

Question

У меня есть требование отображать данные из XML-файла с сервера (путь к файлу что-то вроде files/client.xml) в HTML-таблицу или таблицу данных, какой плагин или, скорее, что я должен использовать, чтобы он имел переменную нумерацию страниц, фильтр инастройка таблицы css.Любые предложения помогут, небольшой пример должен быть плюсом для меня :) Спасибо

Примечание : моя структура XML исправлена ​​

<?xml-stylesheet type="text/xsl" href="csmclientiir.xsl"?>
<csmclient product="abc"   date="4/26/11 2:05 PM">
<system>
    <osname>Linux
    </osname>
    <hostname>AbhishekNix
    </hostname>
    <release>2.6.18-128.el5
    </release>
    <filesystem>
        <file mount='/home/hp1' home='(innfs2:/vol/home/shome/home/hp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/par21' home='(innfs2:/vol/home/shome/home/par21)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/h231' home='(innfs2:/vol/home/shome/home/h231)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/avallin1' home='(innfs2:/vol/home/shome/home/avallin1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/park' home='(innfs2:/vol/home/shome/home/park)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/sp1' home='(innfs2:/vol/home/shome/home/sp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/ganga1' home='(innfs2:/vol/home/shome/home/ganga1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/nbp1' home='(innfs2:/vol/home/shome/home/nbp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    </filesystem>
</system>
<product>
    <showtime>Tue Apr 26 14:05:23 2011
    </showtime>
</product>
</csmclient>

Обновлениес рабочим решением

Так как он не принимает атрибута ... как здесь я хотел бы получить mount, free и т. д. Вот что я сделал в jqGrid для вышеупомянутого xml.

var i=0;
var filesystem=[];
$(xml).find('file').each(function(){ 
    var row={};
    row.id=i++;
    row.total=$(this).attr('total');
    row.free=$(this).attr('free');
    row.used=$(this).attr('used');
    row.percentage=$(this).attr('percentage');
    filesystem.push(row);
});


$('#detailTable').empty();
$('<div width="100%">')
.attr('id','diskUsageSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;Disk Usage</div>'+
        '<table id="list1" width="100%"></table>'+
        '<div id="gridpager"></div>'+
    '</div>')       
.appendTo('#detailTable');  



jQuery("#list1").jqGrid({
    datatype: "clientSide",
    height: 250,
    colNames:['id','Total Space','Free Space', 'Used Space', 'Used Percentage'],
    colModel:[
        {name:'id',index:'id', width:90, align:"right"},
        {name:'total',index:'total', width:90, align:"right"},
        {name:'free',index:'free', width:90, align:"right"},
        {name:'used',index:'used', width:90, align:"right"},
        {name:'percentage',index:'percentage', width:120, align:"right"}
    ],
    pagination:true,
    pager : '#gridpager',
    rowNum:10,
    scrollOffset:0,
    height: 'auto',
    autowidth:true,
    viewrecords: true,
    gridview: true,
    edit:false,
    add:false,
    del:false

});



for(var i=0;i<filesystem.length;i++)
    jQuery("#list1").jqGrid('addRowData',i+1,filesystem[i]);

jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");

Отлично работает. Спасибо @Tomas и @ doctrey

Answer 1

По сути, вы можете читать XML DOM так же, как вы читаете HTML DOM, используя селекторы jQuery. Так что в вашем примере XML, если вы хотите сделать что-то конкретное с каждым элементом <file> - скажем, добавить содержимое его атрибута mount в неупорядоченный список, вы можете сделать что-то вроде этого:

$(xml).('file').children().each(function() {
    var fileElem = this; // save the instance for closure
    $('ul#theList').append($('<li>').text(fileElem.attr('mount'));
});

Вы можете получить содержимое XML с помощью AJAX, используя встроенный в JQuery AJAX API:

$.ajax({
    type: "GET",
    url: "your.xml",
    dataType: "xml",
    success: function(xml) {
        // Insert the previous code snippet here
    }
});

Я получил все это из этого урока , так что это может быть полезно и для вас. Примечание: это был самый первый хит в Google для "jquery xml" ...

Answer 2

Возможно, вы захотите использовать XSLT - это позволит вам принять ответ XML и напрямую применить преобразование XSL, которое затем может быть вставлено в DOM.

Answer 3

jquery.dataTables хорошо, если у вас есть контроль над содержимым XML-файла.Требования к их форматированию довольно строгие.