ReactJS with Jquery DataTable Issue

Question

I am having issue with my react component. In with i tried to bind my jquery DataTable. but every time i am getting error as

Uncaught TypeError: $(...).DataTable is not a function

Here is my implementation.

var test = React.createClass({

componentDidMount: function () {

       var dataSet = [
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],

        ]
        $('#buy-example').DataTable( {
            data: formattedResponse,
            columns: [
                { title: "Name" },
                { title: "Address" },
                { title: "Office" },
                { title: "Start date" }
            ],
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": '<button class="btn show-map"><img class="map-icon" src="abcd/map-icon.PNG" /> Show in map</button>'
            } ]
        } );
    })
},
render() {
    return (
       <div>
          <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
          <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

      <div className="container">
          <table id="buy-example" className="display" width="100%"></table>
            <div id="no-search-data"> Test message </div>
       </div>
    )
}
})

Expert advice is most welcome!!

try to include jquery and jquery.datatables in the bottom of the html files not in your react component — mostafa tourad
– mostafa tourad, Commented Jun 7, 2018 at 9:51

Reşit Körsu · Accepted Answer · 2018-06-07 10:23:25Z

1

Since React starts running code before your div rendered to the page which includes script tags; probably, react can't find those scripts (jquery and datatables) so it gives error if you are working on local try to download those with npm and import them into your component file, if not try to put those script tags into bottom your html file's body tag instead of inside of react class.

answered Jun 7, 2018 at 10:23

Reşit Körsu

5983 gold badges9 silver badges18 bronze badges

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

Comments

asouza2019 · Accepted Answer · 2020-06-06 18:56:15Z

0

Try this.

npm install --save datatables.net-dt

In your root component you need import this dependences:

import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"

so you can load your table.

componentDidMount() {
   $(document).ready(function () {
       $('#myTable').DataTable();
   });
}

That worked for me.

edited Jun 6, 2020 at 18:56

user7720975

answered Jun 6, 2020 at 15:24

asouza2019

11 bronze badge

Collectives™ on Stack Overflow

ReactJS with Jquery DataTable Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related