Перепроверил еще раз с небольшим запросом данных. Получил следующий файл. xml, который я хочу для отображения табличных данных с сеткой данных jQ:
<emplyees>
<emplyee>
<empNme>Cedric Kelly</empNme>
<posn>Senior js Developer</posn>
<city>Edinburgh</city>
<extn>6224</extn>
<hrngDte>2012/03/29</hrngDte>
<SlryPYear>$433,060</SlryPYear>
</emplyee>
<emplyee>
<empNme>Brielle Williamson</empNme>
<posn>Integration Specialist</posn>
<city>New York</city>
<extn>4804</extn>
<hrngDte>2012/12/02</hrngDte>
<SlryPYear>$372,000</SlryPYear>
</emplyee>
<emplyee>
<empNme>Herrod Chandler</empNme>
<posn>Sales Assistant</posn>
<city>San Francisco</city>
<extn>9608</extn>
<hrngDte>2012/08/06</hrngDte>
<SlryPYear>$137,500</SlryPYear>
</emplyee>
<emplyee>
<empNme>Rhona Davidson</empNme>
<posn>Integration Specialist</posn>
<city>Tokyo</city>
<extn>6200</extn>
<hrngDte>2010/10/14</hrngDte>
<SlryPYear>$327,900</SlryPYear>
</emplyee>
<emplyee>
<empNme>Jena Gaines</empNme>
<posn>Office Manager</posn>
<city>London</city>
<extn>3814</extn>
<hrngDte>2008/12/19</hrngDte>
<SlryPYear>$90,560</SlryPYear>
</emplyee>
<emplyee>
<empNme>Quinn Flynn</empNme>
<posn>Support Lead</posn>
<city>Edinburgh</city>
<extn>9497</extn>
<hrngDte>2013/03/03</hrngDte>
<SlryPYear>$342,000</SlryPYear>
</emplyee>
<emplyee>
<empNme>Haley Kennedy</empNme>
<posn>Senior Marketing Designer</posn>
<city>London</city>
<extn>3597</extn>
<hrngDte>2012/12/18</hrngDte>
<SlryPYear>$313,500</SlryPYear>
</emplyee>
<emplyee>
<empNme>Michael Silva</empNme>
<posn>Marketing Designer</posn>
<city>London</city>
<extn>1581</extn>
<hrngDte>2012/11/27</hrngDte>
<SlryPYear>$198,500</SlryPYear>
</emplyee>
<emplyee>
<empNme>Paul Byrd</empNme>
<posn>Chief Financial Officer (CFO)</posn>
<city>New York</city>
<extn>3059</extn>
<hrngDte>2010/06/09</hrngDte>
<SlryPYear>$725,000</SlryPYear>
</emplyee>
<emplyee>
<empNme>Bradley Greer</empNme>
<posn>Software Engineer</posn>
<city>London</city>
<extn>2558</extn>
<hrngDte>2012/10/13</hrngDte>
<SlryPYear>$132,000</SlryPYear>
</emplyee>
<emplyee>
<empNme>Doris Wilder</empNme>
<posn>Sales Assistant</posn>
<city>Sidney</city>
<extn>3023</extn>
<hrngDte>2010/09/20</hrngDte>
<SlryPYear>$85,600</SlryPYear>
</emplyee>
</emplyees>
Помимо этого отображения также необходимо добавить еще один заголовок строки, в который я должен соответствующим образом поместить пару вниз управляет тем, что нужно отфильтровать данные соответствующих столбцов таблицы. На самом деле нужен способ поместить эти выпадающие списки только на некоторые конкретные столбцы, а не на все из них. Сказать, что выпадающие только для столбца "Позиция" и в столбце "Городской офис". Также эти маленькие стрелки сортировки вверх / вниз. Я хочу, чтобы они прикреплялись к имени заголовка столбца, а не скользили вниз по второй строке заголовка (где находятся раскрывающиеся списки). Пример раскрывающегося списка данных приведен здесь:
https://datatables.net/examples/api/multi_filter_select.html
Только это примерно. html таблица данных, а не. xml как мое требование .
Значит, здесь релевантная. html часть:
...
<body>
<h5 style="text-align:center;margin-bottom:1em">xml dt employees display</h5>
<div class="table-responsive container-fluid" style="width:83%;height:101%">
<table id="emplys" border="1" class="table display" width="90%" style="border-collapse:collapse;text-align:center">
<thead><tr><th>Empl Name</th><th>Position</th><th>City's Office</th><th>Phn.Extn</th><th>Hrng. Date</th><th>Annl.Salary</th></tr>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>
</table>
</div>
</body>
...
и соответствующий .js / .jQ выглядит следующим образом:
$(function(){
var prstbl = $('#emplys').dataTable({searching:false,info:false,"iDisplayLength":5,lengthMenu: [1, 5, 10],initComplete:function()
{
this.api().columns().every(function()
{
var select = $('<select><option value=""></option></select>').appendTo($(this.header()).empty()).on('change', function()
{
var val = $.fn.dataTable.util.escapeRegex($(this).val())
this.search(val ? '^' + val +'$' : '', true, false).draw()
})
this.data().unique().sort().each(function(d,j)
{
if(this.search() === '^'+d+'$')
select.append('<option value="'+ d +'" selected="selected">'+ d +'</option>')
else
select.append('<option value="'+ d +'">'+ d +'</option>')
})
})
},
columns: [{data:"empNme"},{data:"posn"},{data:"city"},{data:"extn"},{data:"hrngDte"},{data:"SlryPYear"}]
})
$.ajax({type:"GET", url:"xml/emplys.xml", dataType:"xml", success:
function(xml)
{
var prsns = $(xml).find("emplyee")
prsns.each(function(idx, prs)
{
var dteTbl = []
$(prs).children().each(function(j,chlnd)
{
dteTbl[$(chlnd).get(0).tagName] = $(chlnd).text()
})
prstbl.fnAddData(dteTbl) //prstbl.row.add(dteTbl) - not working
})
}
})
})
Но как можно заметить, что выпадающая часть не работает вообще! Это было взято из datatables. net site.
Поэтому, пожалуйста, ребята, помогите мне с этим вопросом. Большое спасибо