How can I use 1 datatable to display multiple datasets

markMathews1989

Hello,

Currently, I have 3 different types of data that I want to display (from 3 different sources). I have an HTML page and a Related JS file for each data type. I also have a nav menu that allows me to switch between my datatables. This all works fine. What I am trying to do is to only use 1 HTML page and 1 JS file and navigate using a similar nav menu. How can I do this?

Example of what I have (for redundancy purposes, I only listed 1 table and 1 JS file. NOTE: There are 2 more JS and HTML files similar to this: 1 for finance and 1 for Marketing):

$(document).ready(function() {
    var accountingTable = $('#accounting-table').DataTable( {
        ajax: {
            url: '/files/accounting',
            dataSrc: ''
        },
        info: false,
        order: [[ 2, "asc" ]],
        paging: false,
        scrollX: true,
        scrollY: 500,
        searching: true,
        scrollCollapse: true,
        columns: [
            {
                data: "userID",
            },
            {
                data: "category",
            },
            {
                data: "date",
            },
            {
                data: "file",
            }
        ]

    } );
});

<div id="accounting-table-div" cellspacing="0" width="100%">
    <table id="accounting-table" cellspacing="0" width="100%">
        <thead>
            <tr style="text-align: left">
                <th>User ID</th>
                <th>Category</th>
                <th>Date</th>
                <th>File</th>
            </tr>
        </thead>
    </table>
</div>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

markMathews1989

I was able to figure it out by placing each ajax request in a click event and using the ajax.url.load() method