locked
JQuery DataTables - With AJAX RRS feed

  • Question

  • User974100899 posted

    I am learning Asp.net core and MVC and am wanting to use JQuery DataTables on my page.  This is what I have in my cshtml and my jquery but my JQuery DataTable is never being created?

    <div id="table1">
        <table id="example" class="display">
        </table>
    </div>
    <br />
    <div class="text-center">
        <h1>Checks</h1>
        <div class="btn-group">
            <button type="button" id="btnTPC">TC Check</button>
        </div>
    </div>
    
    $("#btnTPC").click(function () {
        $('#example').DataTable({
            ajax: {
                url: '@Url.Action("GetTC", "TC")',
                method: "GET"
            },
            columns: [
                { data: "Location" },
                { data: "TC" }
            ]
        });
    });
    

    Thursday, October 10, 2019 4:50 PM

Answers

  • User665608656 posted

    Hi LiarLiarPantsOnFire,

    According to your full _Layout.cshtml, the reason for the error is that the following js files referenced by your master page is in conflict.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
            </script>

    I recommend that you delete the jQuery reference for version 1.7.1 and jquery.js, then place version 3.3.1 jQuery where version 1.7.1 is located.

    It is recommended that you check your master page to ensure that no JS reference file conflicts.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 11, 2019 1:47 AM

All replies

  • User2053451246 posted

    Refresh the page with the Console tab of developer tools open to see any errors.  Also do the same on the Network tab of developer tools.  You open developer tools by pressing the F12 key.  You will see script URL and JavaScript errors there.

    Thursday, October 10, 2019 6:06 PM
  • User974100899 posted

    On button press if I open the Dev Console, I get this error

    Uncaught TypeError: $(...).DataTable is not a function
    at HTMLButtonElement.<anonymous> (site.js?v=z24mdPOuYS…NZryPIzfHbE3qOQ2M:6)
    at HTMLButtonElement.dispatch (jquery.js:5183)
    at HTMLButtonElement.elemData.handle (jquery.js:4991)
    (anonymous)    @    site.js?v=z24mdPOuYS…NZryPIzfHbE3qOQ2M:6
    dispatch    @    jquery.js:5183
    elemData.handle    @    jquery.js:4991

    Thursday, October 10, 2019 6:08 PM
  • User2053451246 posted

    Make sure you've included the correct paths to the JS and CSS for Datatables.net and JQuery.  Make sure those files are loaded before you call .DataTable.

    Thursday, October 10, 2019 7:27 PM
  • User974100899 posted

    Thes are what I have in my _Layout.cshtml

        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="~/css/Formatting.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></style>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    if it helps this is a pastebin of my full _Layout.cshtml

    https://pastebin.com/iw8uA2Rf

    Thursday, October 10, 2019 7:36 PM
  • User665608656 posted

    Hi LiarLiarPantsOnFire,

    According to your full _Layout.cshtml, the reason for the error is that the following js files referenced by your master page is in conflict.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
            </script>

    I recommend that you delete the jQuery reference for version 1.7.1 and jquery.js, then place version 3.3.1 jQuery where version 1.7.1 is located.

    It is recommended that you check your master page to ensure that no JS reference file conflicts.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 11, 2019 1:47 AM