Basic initialization not working

genesys_kumar

Hi,
I just downloaded the CSS and js for DataTable and tried an example with a simple HTML page. I copied the table content from the example given on the site - but it displays the table data only (not with referred plugin's)

In the code,
I've referenced for Jquery 3.6.0, jquery-dataTables.min.css, and jquery-dataTables.min.js (all local files), I also tried referring CDN links but nothing working.

Can you please help me, with what I'm missing here to run the given sample?

Thanks,
Kumar

kthorngren

We can help but we will need to see what you are doing. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Here is a basic example you can experiment with:
http://live.datatables.net/

Kevin

genesys_kumar

Thank you so much. it is a syntax error that caused the issue. Now it is working.

I've another question, in my Data I've column "status" (for each row) where value can be "true" or "false". based on the value i would like to make another column in the row linkable or selectable. is that possible?

rf1234

Using the "select" extension you can select a row. You can also make rows selectable based on the data in each row.

Like this for example using "rowCallback":

....
select: {
    style: 'single',
    selector: 'tr.selectRow td:not(:first-child)'
},
....
rowCallback: function (row, data) {
    if ( data.status ) { //boolean true or false
        $(row).addClass('selectRow');
    } else {
        $(row).removeClass('selectRow');
    }
}
....

These snippets are part of one of my data table definitions. Just search the docs for the select extension and rowCallback for more details. The selector I use allows only "selectRow" rows to be selected but not on the first column because that would be in conflict with the toggle child row buttons.

genesys_kumar

Thanks for the quick response. Sure I will search given topics.

Meanwhile, I did some samples (creating table rows with data from JSON file), I see table created with a Datatable look and feel but Search and pagination are not working.
I've my code uploaded here "https://github.com/ramkumar2325/DataTable_Sample.git'. Can you please check what i missed

kthorngren

Move the LoadGrid(); call inside the getJSON function, after the for loop. Whats happening is the getJSON is an asynchronous function and LoadGrid(); is executing before the table is built. Moving it inside getJSON will run it after the table is built.

Kevin

genesys_kumar

Thank you both helping with this issue. Now I've integrated this Datatable in my actual project.
I hope it is the last question I've - how to wrap text in the column?

kthorngren

how to wrap text in the column?

Stack Overflow or other tutorials will have techniques to wrap the cell text.

Alternatives are to use the ellipsis plugin.

Kevin