Error dataTables with jQuery and Bootstrap

Question

Error dataTables with jQuery and Bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am trying to do the following using dataTables. What I want is that the circle with the most appears in the first column and that when I click, I display the other data, as shown in the image.

I am following the steps of the dateTables example that I leave in the following link. link

I have referenced all these libraries but it does not show me the circle with the most.

<link rel="stylesheet" href="res/bootstrap/css/bootstrap.min.css"> <!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="plugins/datatables/responsive.bootstrap.min.css">

<script type="" src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="res/bootstrap/js/bootstrap.min.js"></script> <!-- datepicker -->
<script type="" src="plugins/datatables/jquery.dataTables.min.js"></script>
<script type="" src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="" src="plugins/datatables/dataTables.responsive.min.js"></script>
<script type="" src="plugins/datatables/responsive.bootstrap.min.js"></script>


//El JavaScript

<script type="text/javascript">
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>

Someone can tell me what I need or what I have wrong.

jquery bootstrap datatables

asked by Horus 07.02.2018 в 02:34

source

2 answers

0

<script type="" src="plugins/jQuery/jquery-1.12.4.js"></script>
<script type="" src="plugins/datatables/jquery.dataTables.min.js"></script>
<script type="" src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="" src="plugins/datatables/dataTables.responsive.min.js"></script>
<script type="" src="plugins/datatables/responsive.bootstrap.min.js"></script>

Put them in that order of preference the JSs down, and try to put Jquery 1.12.4

answered by 07.02.2018 в 05:13

PostgreSQL nested query mvc recover data from view and refresh

score 1 · Accepted Answer

You could use the cdn of the libraries directly, although if it's exclusively local, I recommend checking if each of them works, also make sure to use the following classes in your table

class="table table-striped table-bordered dt-responsive nowrap"

Another point is that you also have a large number of columns, because if it is responsive, a + will not appear on a large screen, but if it is small it may appear.

Here is an example using the cdn :

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css" rel="stylesheet"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/responsive.bootstrap.min.js"></script>

<!-- ojo con las clases -->
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
     </table>