DataTables

DataTables Examples

HTML

<script src="https://cdn.datatables.net/1.7.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.7.5/css/demo_table.css">
<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>
    <tbody>
    </tbody>    
</table>

CSS

#dynamicPhoneDirectory {
    width: 100%;
}

JavaScript

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

$("#dynamicPhoneDirectory").delegate('tbody tr', 'click', function() { 
    var data = table.fnGetData(this);
    alert('Number to dial : '+data[3]);
});