1

I'm struggling to get the data tables plugin working on my website. This is a .Net 4.5 MVC web application. I've installed jQuery(2.1.3) and DataTables(1.10.4) via nuGet. I've been trying various setups and have tried replacing my code completely with the examples on the data tables website with no luck. Can anyone tell me what I'm doing wrong?

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/DataTables-1.10.4/jquery.dataTables.js"></script>
<link href="~/Content/DataTables-1.10.4/css/jquery.dataTables.css" rel="stylesheet" />


<div class="col-md-12">    
    <table id="searchInventoryResults" class="display">
        <thead>
            <tr>
                <th>Assigned Location</th>
                <th>Manufacturer</th>
                <th>Model</th>
                <th>Serial Number</th>
                <th>MCSC Tag Number</th>
                <th>PO Number</th>                
                <th>Salvage Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>CCC floor-6 F-3</td>
                <td>Toshiba</td>
                <td>LR-1</td>
                <td>100215555</td>
                <td>523144632</td>                                
                <td>522133354</td>
                <td>11/13/2225</td>
            </tr>
            <tr>
                <td>CCC floor-5 G-3</td>
                <td>Toshiba</td>
                <td>LR-1</td>
                <td>100215566</td>
                <td>523144566</td>
                <td>522133366</td>
                <td>11/13/2235</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            $('#searchInventoryResults').DataTable();
        });
    </script>

The script and css paths are drag and drop from the folders they reside in, in the project. I do have two other jQuery features up and running perfectly in the site currently.

Specifically, none of the features are showing up. There is no search box, I can't click on columns, the css isn't affecting the table.

rogerdeuce
  • 1,471
  • 6
  • 31
  • 48
  • If you put alert before calling datatable alert comes? – Ehsan Sajjad Mar 04 '15 at 14:44
  • 2
    How specifically is it not working as expected? Is there an error in the JavaScript console? Unexpected behavior? Something else? – David Mar 04 '15 at 14:45
  • @David specifically there is no search box, sorting or any other bells and whistles – rogerdeuce Mar 04 '15 at 14:48
  • @EhsanSajjad I added alert like you suggested and I do get the alert pop up, [object Object] – rogerdeuce Mar 04 '15 at 14:49
  • @rogerdeuce: Maybe the plugin is failing to initialize? Check the JavaScript console in the browser. Make sure all of the script and CSS resources loaded properly in the browser's debugging tools. – David Mar 04 '15 at 14:50
  • @rogerdeuce if you have other plugins on page then chance is that they are conflicting check firebug console – Ehsan Sajjad Mar 04 '15 at 14:52
  • @David Firefox dev edition is showing "TypeError: $(...).DataTable is not a function, and IE gives me "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'DataTable'" – rogerdeuce Mar 04 '15 at 14:54
  • @rogerdeuce: Then the data tables plugin didn't load. Check that the references are correct. If those `~` path references are showing client-side then that won't work, client-side code has no knowledge of what `~` means on the server. – David Mar 04 '15 at 14:55
  • @David I switched my script imports to this format: and the same error is showing – rogerdeuce Mar 04 '15 at 15:09
  • Use your browsers debugger to see exactly what it gets for the path for the datatable JS file, and then try accessing that URL directly to see if it is accessible/correct. – John - Not A Number Mar 04 '15 at 17:36
  • @John-NotANumber I did what you suggested today and the path works and takes me to see about 15000 lines of javascript with datatable functions – rogerdeuce Mar 06 '15 at 17:58
  • @EhsanSajjad I ran it with firebug today, I'm only showing one error and that's directly on the line that calls $.DataTable(). I was able to follow the source links without error – rogerdeuce Mar 06 '15 at 22:27
  • Possible duplicate of [Datatables: Cannot read property 'mData' of undefined](http://stackoverflow.com/questions/25377637/datatables-cannot-read-property-mdata-of-undefined) – rogerdeuce Oct 06 '15 at 16:03

0 Answers0