Basic initialization not working

Basic initialization not working

genesys_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

    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?

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited February 2022

    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_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

Sign In or Register to comment.