Load DataTables dynamically in JQuery tabs

Question

I am planning to use JQuery Datatables in one of my project, so i decided to do a POC to ensure that everything is planned.

I build a table where i will be printing the values from my Object which will be received as a JSON during my further development. But i am getting an AJAX error for the id i was going to print the data.

I have uploaded the code on JSFiddle!

HTML

 <div id="tab-customers">
            <table id="customers-table" class="display general-table" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Gender</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
            </table>
        </div>

JQuery

 $(".tabs").click(function() {
                var source = $(this).data("source");
                var tableId = $(this).data("table");
                initiateTable(tableId, source);
            });
function initiateTable(tableId, source) {
                var table = $("#" + tableId).DataTable({
                    "ajax": source,
                    order: [],
                    columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }],
                    "destroy": true,
                    "bFilter": true,
                    "bLengthChange": false,
                    "bPaginate": false
                });
            }
            initiateTable("customers-table", "customers");
            $("#dynamic-tabs").tabs();
        });

User863 · Accepted Answer · 2019-09-16 12:02:59Z

1

Try the columns option

columns: [
    { "data": "Id" }, 
    { "data": "firstName" }, 
    { "data": "lastName" }, 
    { "data": "email" }, 
    { "data": "phone" }, 
    { "data": "gender" }, 
    { "data": "city" }, 
    { "data": "country" }
]

Demo

answered Sep 16, 2019 at 12:02

User863

20.1k3 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tkamath99 Over a year ago

Does that mean the column would need separate data object ?

User863 Over a year ago

use seprate variables

Collectives™ on Stack Overflow

Load DataTables dynamically in JQuery tabs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related