Wie aktivieren Sie die Seitennumerierung der Bootstrap-Tabelle und die Suche?

Ich habe two Anleitungen zum Hinzufügen von Paginierung zu einer Bootstrap-Tabelle gefolgt, aber wenn ich die erforderlichen Links und Skripts hinzufügen, wird die Paginierung oder Suche in der Bootstrap-Tabelle nicht dargestellt.Wie aktivieren Sie die Seitennumerierung der Bootstrap-Tabelle und die Suche?

Ich habe versucht, die jQuery-Referenz am Anfang des head-Tags zu platzieren, wie diese Lösung vorgeschlagen hat, aber es machte keinen Unterschied.

Ich bin sicher, das ist nur ein Unterschied in der Reihenfolge der externen Bibliothek cdn Referenzen, aber ich bin mir nicht sicher über die richtige Reihenfolge.

Ich habe auch überprüft, dass das Skript die richtige Tabelle verweist, die es tut - „Eskalation“

Frage:

Wie kann ich jquery und bootstrap Referenzen organisieren Tabelle Paging zu zeigen?

Markup: (Kern der Markup-Ansicht)

<!DOCTYPE html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
    <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script> 

    <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container body-content"> 
     <div class="page-header"> 
      <label class="heading">History</label> 
      <div class="form-group"> 
       <fieldset> 
        <form action="" class="form-group" method="post"> 
         <div class="table-responsive"> 
          <div class="table-responsive">        

           <table id="escalation" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
            <thead> 
             <tr> 
              <th>Application</th> 
              <th>EMOPOP</th> 
              <th>Stats</th> 
              <th>Statement</th> 
              <th>Time</th> 
              <th>Updated</th> 
              <th>Details</th> 
              <th>Price</th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr> 
              <td>Tiger Nixon</td> 
              <td>System Architect</td> 
              <td>Edinburgh</td> 
              <td>61</td> 
              <td>2011/04/25</td> 
              <td>$320,800</td> 
              <td>2011/04/25</td> 
              <td>$320,800</td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 
        </form>   <!--END OF FORM ^^--> 
       </fieldset> 
      </div> 
      <hr /> 
     </div> 
    </div> 
</body> 
<script> 
    $(document).ready(function() { 
     $('#escalation').dataTable(); 
    }); 
</script>

Quelle

2016-05-16 Brian J

sollte nicht $ sein ('# Eskalation'). DataTable(); '? –

@FelippeDuarte Ich habe versucht .DataTable(); auch das macht keinen Unterschied. Irgendwelche anderen Ideen? –

In beiden Fällen bekomme ich den Fehler auf IE, 'Objekt unterstützt keine Eigenschaft oder Methode 'DataTable'' –

Die Antwort für den Fall, jemand anderes hat ein ähnliches Problem, die Verweise wurden in meinem Layout-Seite statt. Dies bedeutete, dass die Referenzen in der Ansicht, die die Tabelle enthielt, keine Auswirkung hatten.

ich die Referenzen in layout.cshtml zu jquery 1.9+ aktualisiert und hatte auch die folgenden Kommentar aus, die die Skripte von Rendering verhindert:

//commented out 
//@Scripts.Render("~/bundles/jquery") 
//@RenderSection("scripts", required: false)

Diese hier in einer ähnlichen Frage vorgeschlagen wurde:

MVC 4 Razor Object doesn't support property or method 'dataTable'

Quelle

2016-05-17 08:29:25

Dieser Code völlig in Ordnung läuft, nur Test mit der snipped unter

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Final Output</title> 
 
<meta name="description" content="Bootstrap."> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> 
 
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
 
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
</head> 
 
<body style="margin:20px auto"> 
 
<div class="container"> 
 
<div class="row header" style="text-align:center;color:green"> 
 
<h3>Bootstrap</h3> 
 
</div> 
 
<table id="myTable" class="table table-striped" > 
 
     <thead> 
 
      <tr> 
 
      <th>ENO</th> 
 
      <th>EMPName</th> 
 
      <th>Country</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>001</td> 
 
      <td>Anusha</td> 
 
      <td>India</td> 
 
      <td>10000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>002</td> 
 
      <td>Charles</td> 
 
      <td>United Kingdom</td> 
 
      <td>28000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>003</td> 
 
      <td>Sravani</td> 
 
      <td>Australia</td> 
 
      <td>7000</td> 
 
      </tr> 
 
\t \t <tr> 
 
      <td>004</td> 
 
      <td>Amar</td> 
 
      <td>India</td> 
 
      <td>18000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>005</td> 
 
      <td>Lakshmi</td> 
 
      <td>India</td> 
 
      <td>12000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>006</td> 
 
      <td>James</td> 
 
      <td>Canada</td> 
 
      <td>50000</td> 
 
      </tr> 
 
\t \t 
 
\t \t <tr> 
 
      <td>007</td> 
 
      <td>Ronald</td> 
 
      <td>US</td> 
 
      <td>75000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>008</td> 
 
      <td>Mike</td> 
 
      <td>Belgium</td> 
 
      <td>100000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>009</td> 
 
      <td>Andrew</td> 
 
      <td>Argentina</td> 
 
      <td>45000</td> 
 
      </tr> 
 
\t \t 
 
\t \t  <tr> 
 
      <td>010</td> 
 
      <td>Stephen</td> 
 
      <td>Austria</td> 
 
      <td>30000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>011</td> 
 
      <td>Sara</td> 
 
      <td>China</td> 
 
      <td>750000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>012</td> 
 
      <td>JonRoot</td> 
 
      <td>Argentina</td> 
 
      <td>65000</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t </div> 
 
</body> 
 
<script> 
 
$(document).ready(function(){ 
 
    $('#myTable').dataTable(); 
 
}); 
 
</script> 
 
</html>

Quelle

2016-05-16 17:44:34

@ brian-j das funktioniert –

Es ist hier zu arbeiten :

https://jsfiddle.net/bu4r2od4/

müssen Sie diese jQuery 1.9+

und verwenden Sie verwenden:

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

Quelle

2016-05-16 18:02:13

Wie aktivieren Sie die Seitennumerierung der Bootstrap-Tabelle und die Suche?

Antwort

Verwandte Themen