locked
Data table is not working properly. $(…).DataTable is not a function RRS feed

  • Question

  • User-1718184125 posted

    I am pulling some data from a SharePoint List and insert the data into data tables but an error comes up. The data is being pulled correctly but the functionality is not working. I coded the webpart and it was working fine by itself but when I inserted the webpart into a sharepoint layout the error comes up.
    I have added the jQuery $.noConflict(); code because I read there could be 2 jQuery calls and that would fix it. Did not work. I know the master page jas a jQuery call but when I remove the call on the webpart it breaks.I also tried changing the order of the scripts but didn't fix the problem.

    f1 = $.ajax({
        url: "/cyberSecurity/_api/web/lists/GetByTitle('cyberFeed')/items",
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
        success: function(data) {
            var items = data.d.results;
            console.log(items);
    
            var cyberFeed = $('#cyberFeed');
            var feedContent;
    
            for (var i = 0; i < items.length; i++) {
                feedContent = '<tr style="background-color: #003967; color: white;">' + '<th>' +'<h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">' +items[i].Title + '</h6>'+ '</th>' + '</tr>' +
                    '<td style="background-color: white; padding-left: 19px; padding-top:10px;">' + items[i].Description + '</td>';
                cyberFeed.append(feedContent);
            }
        },
    
        error: function(data) {
            console.log('Error: ' + data);
        }
    
    
    }); // End Service Icons  //End Service Icons
    
    f1.done(function() {
    $.noConflict();
        $('#dtBasicExample').DataTable({
            "pagingType": "numbers", // "simple" option for 'Previous' and 'Next' buttons only
            "ordering": false,
    
        });
        $('.dataTables_length').addClass('bs-select');
    }
    ```
    ```
    <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/jquery-3.4.0.min.js"></script>
        <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/popper.min.js"></script>
        <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/Style%20Library/V7/js/vendor/mdb_update/js/mdb-iefix.js"></script>
        <script type="text/javascript" src="/_catalogs/masterpage/V6/js/vendor/datatables.min.js"></script>
        <script type="text/javascript" src="/_catalogs/masterpage/V6/js/vendor/datatables-select.min.js"></script>```

    </div> </div> </div>

    Wednesday, June 19, 2019 2:02 PM

All replies

  • User753101303 posted

    Hi,

    For now it seems not all scripts are loaded properly. What if using F12 Network to see if you have a 404 not found or some other error for some of the scripts you are loading...

    Wednesday, June 19, 2019 2:26 PM
  • User-1718184125 posted

    Hello 

    Not 404 error. What is strange is that the webpart itself works perfectly but when the webpart is imported to a page layout it breaks.

    Wednesday, June 19, 2019 2:37 PM
  • User475983607 posted

    Not 404 error. What is strange is that the webpart itself works perfectly but when the webpart is imported to a page layout it breaks.

    Then it is probably an order bug.  The code is trying to access the DataTable widget before the library has been loaded.

    Wednesday, June 19, 2019 3:37 PM
  • User-1718184125 posted

    Any recommended order? I have move them around but no combination works. 

    Wednesday, June 19, 2019 6:25 PM
  • User475983607 posted

    DigitalDev

    Any recommended order? I have move them around but no combination works. 

    I'm not sure what order you changed and the design is questionable.

    Provide enough code to reproduce this issue if you need community debugging support. 

    There's no indication when the AJAX function is invoked.  Which in turn constructs the DataTable using a promise.  On a side note, there is a success callback which is questionable since a you are using a promise.  Lastly, there is no indication #dtBasicExample exists.  

    The DataTable has the ability to assign a data source like an AJAX function.  Can you explain the design?  Why does the AJAX function trigger the DataTable init in a done() promise? 

    Wednesday, June 19, 2019 6:44 PM
  • User-1718184125 posted

    DO you know how to upload images? It won't let me

    Wednesday, June 19, 2019 6:50 PM
  • User475983607 posted

    DigitalDev

    DO you know how to upload images? It won't let me

    What does uploading an image have to do with the "DataTable is not a function" error?

    Edit: I took a closer look at that success function and the HTML is invalid.  It creates multiple <th> rows and the <td> is not in a row at all.

    Please start using the browser's dev tools (F12) to verify your code is working as expected.

    Wednesday, June 19, 2019 7:08 PM
  • User-1718184125 posted

    I always use the Dev tools and in fact the <td> is in a row. 

    Wednesday, June 19, 2019 7:37 PM
  • User475983607 posted

    DigitalDev

    I always use the Dev tools and in fact the <td> is in a row. 

    I created a test for this code...

    feedContent = '<tr style="background-color: #003967; color: white;">' + '<th>' +'<h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">' +items[i].Title + '</h6>'+ '</th>' + '</tr>' +
                    '<td style="background-color: white; padding-left: 19px; padding-top:10px;">' + items[i].Description + '</td>';
                cyberFeed.append(feedContent);

    which produces invalid HTML for each item in the for loop.

    <tr style="background-color: #003967; color: white;">
    	<th>
    		<h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">title 1</h6>
    	</th>
    </tr>
    <td style="background-color: white; padding-left: 19px; padding-top:10px;">Description 2</td>

    If there are multiple items then you'll end up with multiple <th> rows  and a <td> without a row.  If you test the following markup in chrome...

    <div>
        <table>
            <tr style="background-color: #003967; color: white;">
                <th>
                    <h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">title 1</h6>
                </th>
            </tr>
            <td style="background-color: white; padding-left: 19px; padding-top:10px;">Description 2</td>
            <tr style="background-color: #003967; color: white;">
                <th>
                    <h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">title 1</h6>
                </th>
            </tr>
            <td style="background-color: white; padding-left: 19px; padding-top:10px;">Description 2</td>
            <tr style="background-color: #003967; color: white;">
                <th>
                    <h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">title 1</h6>
                </th>
            </tr>
            <td style="background-color: white; padding-left: 19px; padding-top:10px;">Description 2</td>
            <tr style="background-color: #003967; color: white;">
                <th>
                    <h6 class="h6-responsive" style="padding-left: 5px; padding-top: 5px;margin-bottom: 4px;  ">title 1</h6>
                </th>
            </tr>
            <td style="background-color: white; padding-left: 19px; padding-top:10px;">Description 2</td>
        </table>
    </div>

    ...chrome will fix the invalid table markup.  That's nice of Chrome but you should fix the logic.

    However, the multiple <th> elements will mess with DataTable.  That is, if you are assigning DataTable to the markup found in the AJAX success callback.

    Anyway, I recommend you use Dev Tools to verify your work.  Not just the HTML but also the logic.  Use standard break points and single stepping the code.

    Wednesday, June 19, 2019 8:01 PM