JQuery 1.4.4 和数据表 1.7 不工作

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;
    };

我正在使用 Jquery 1.4.4 版本和 1.7.5 数据表版本？

如有任何帮助，我们将不胜感激。

谢谢，哈希

Answer 1

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

Answer 2

我放弃调试 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]);
    }        
}

这适用于数据tables 1.7.5 -> http://jsfiddle.net/nsmqg4n2/ 使用的 jQuery 是 1.6.4，这是 jsFiddle 中可能的最低版本，但这毕竟并没有真正影响上面的代码。 jQuery dataTables 1.7.5 只需要 jQuery 1.3.x 或更好。

要检索数据（例如单击 table 时）使用 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]);
});

分叉 fiddle -> http://jsfiddle.net/bu87ke7a/

JQuery 1.4.4 和数据表 1.7 不工作

JQuery 1.4.4 and Datatable 1.7 not working

javascript

xml

datatable

jquery

json