DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="tableA">
    <thead>
        <tr>
            <th>id</th>
            <th>mm_cliente</th>
            <th>dt_nasc</th>
            <th>info</th>            
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>    

<table id="tableB">
    <thead>
        <tr>
            <th>id</th>
            <th>mm_cliente</th>
            <th>num_cnpj</th>
            <th>nm_cidade</th>            
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JavaScript

var json =  {
    "clients": {
        "person": [
            {
                "cd":0,
                "id":"C-0010",
                "nm_cliente":"Name AAA",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            },
            {
                "cd":1,
                "id":"C-0013",
                "nm_cliente":"Name BBB",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            },
            {
                "cd":2,
                "id":"C-0017",
                "nm_cliente":"Name CCC",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            }
        ],
        "company": [
            {
                "cd":0,
                "id":"C-0032",
                "nm_cliente":"Name Client",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City AAA"
            },
            {
                "cd":1,
                "id":"C-0033",
                "nm_cliente":"Client Name",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City BBB"
            },
            {
                "cd":2,
                "id":"C-0035",
                "nm_cliente":"jEmpresa teste",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City CCC"
            }
        ]
    }
}

var options = {
	bPaginate: true,
	sPaginationType: "full_numbers",
	aLengthMenu: [25,50,100,500]
    //etc 
}    
        
function initialize(json) {
     options.aaData = json.clients.person;
     options.aoColumns = [
           { "mData": "id" },
           { "mData": "nm_cliente" },
           { "mData": "dt_nasc" },
           { "mData": "info" }
        ];
    
    $("#tableA").dataTable(options);
    
    options.aaData = json.clients.company;
    options.aoColumns = [
           { "mData": "id" },
           { "mData": "nm_cliente" },
           { "mData": "num_cnpj" },
           { "mData": "nm_cidade"...