Question

我需要一些数据表的帮助。我可能会遗漏一些东西： -

以下是我的HTML

<div id="cfcPhoneDirectory">
<table id="dynamicPhoneDirectory">
    <thead>
       <tr><th>Phone Book</th><th>Last Name</th><th>First Name</th><th>Number</th></tr>
    </thead>
</table>

和剧本

    var rawxmlData = "<PhoneBooks><PhoneBook><name>PhoneBook1</name><type>GLOBAL</type><Contacts><Contact><LNAME>Elis</LNAME><FNAME>Jason</FNAME><Number>1234567890</Number></Contact><Contact><LNAME>Randell</LNAME><FNAME>Mark</FNAME><Number>7895896710</Number></Contact><Contact><LNAME>Flower</LNAME><FNAME>Andy</FNAME><Number>8796024589</Number></Contact></Contacts></PhoneBook><PhoneBook><name>PhoneBook2</name><type>TEAM</type><Contacts><Contact><LNAME>Cullinan</LNAME><FNAME>David</FNAME><Number>6027051573</Number></Contact><Contact><LNAME>Webber</LNAME><FNAME>Mark</FNAME><Number>4842051298</Number></Contact><Contact><LNAME>Mitchell</LNAME><FNAME>Randy</FNAME><Number>7012841562</Number></Contact></Contacts></PhoneBook></PhoneBooks>";

    var t = $('#dynamicPhoneDirectory').DataTable();


    var xmlData = JSON.stringify(xmlToJson(rawxmlData));

    ($(xmlData)).find("PhoneBook").each(function () 
    {
       var phoneBookType = $(this).find("type").text()
       $(this).find("Contact").each(function () {     t.row.add([phoneBookType,     $(this).find("LNAME").text(),                     $(this).find("FNAME").text(), $(this).find("Number").text()]).draw();
       });
    });
    // Changes XML to JSON
    function xmlToJson(xml) {

        // Create the return object
        var obj = {};

        if (xml.nodeType == 1) { // element
            // do attributes
            if (xml.attributes.length > 0) {
            obj["@attributes"] = {};
                for (var j = 0; j < xml.attributes.length; j++) {
                    var attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType == 3) { // text
            obj = xml.nodeValue;
        }

        // do children
        if (xml.hasChildNodes()) {
            for(var i = 0; i < xml.childNodes.length; i++) {
                var item = xml.childNodes.item(i);
                var nodeName = item.nodeName;
                if (typeof(obj[nodeName]) == "undefined") {
                    obj[nodeName] = xmlToJson(item);
                } else {
                    if (typeof(obj[nodeName].push) == "undefined") {
                        var old = obj[nodeName];
                        obj[nodeName] = [];
                        obj[nodeName].push(old);
                    }
                    obj[nodeName].push(xmlToJson(item));
                }
            }
        }
        return obj;
    };

我使用的是1.4.4的Jquery版本和1.7.5的数据表版本？

任何帮助都将不胜感激。

谢谢，散列

Answer 1

我放弃了调试XML解析 - 太神秘了。根本不需要将XML移植到JSON。所以改为：

var table = $('#dynamicPhoneDirectory').dataTable();

var parser = new DOMParser(),
    xmlDoc = parser.parseFromString(rawxmlData,"text/xml"),
    phoneBook = xmlDoc.querySelector('PhoneBooks'),
    phoneBooks = phoneBook.querySelectorAll('PhoneBook');

for (var i=0;i<phoneBooks.length;i++) {
    var firstname, lastname, number, contacts,
        phoneBookName = phoneBooks[i].querySelector('name').textContent,
        phoneBookContacts = phoneBooks[i].querySelector('Contacts'),
        contacts = phoneBookContacts.querySelectorAll('Contact');
    for (var c=0;c<contacts.length;c++) {
        lastName = contacts[c].querySelector('LNAME').textContent;
        firstName = contacts[c].querySelector('FNAME').textContent;        
        number = contacts[c].querySelector('Number').textContent;        
        //add the contact to dataTables
        table.fnAddData([phoneBookName, lastName, firstName, number]);
    }        
}

这适用于数据表 1.7.5 - ＆gt;的 http://jsfiddle.net/nsmqg4n2/ 使用过的jQuery是1.6.4，jsFiddle中最低的可能，但毕竟不会真正对上面的代码造成影响。 jQuery dataTables 1.7.5只需要jQuery 1.3.x或更高版本。

要检索数据（例如，在单击表时），请使用API方法fnGetData()，示例（jQuery 1.6.4，dataTables 1.7.5）：

$("#dynamicPhoneDirectory").delegate('tbody tr', 'click', function() { var data = table.fnGetData(this); alert('Number to dial : '+data[3]); });
分叉小提琴 - ＆gt;的 http://jsfiddle.net/bu87ke7a/

Answer 2

升级我的代码以使用JQuery 1.9.1和Datatable1.10.7解决了这个问题。

JQuery 1.4.4和Datatable 1.7无法正常工作

2 个答案: