DataTables pagination style doesn't styled as bootstrap theme

javascript jquery css twitter-bootstrap-3 datatable

27,693

Solution 1

Try It help you this code work my projects

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/> 
    <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>  


    <div style="clear: both;margin-top: 18px;">
      <table id="example" class="display table table-striped table-hover" cellspacing="0" width="100%">
            <thead>
                <tr>
                  <th>ID</th>
                  <th>SKILL</th>             
                  <th>EDIT</th>
                  <th>DELETE</th>
                </tr>
              </thead>
            <tbody>
             <tr>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
             </tr>
              .
    .
    .
    .
    .
    .
     <tr>
               <td>10</td>
               <td>10</td>
               <td>10</td>
               <td>10</td>
             </tr>

            </tbody>
        </table>

      </div>

    <script type="text/javascript">
    $(document).ready(function () {
     var table = $('#example').DataTable( {
               "pageLength": 5,
                "pagingType": "full_numbers"
          });
        $('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
    });
    </script>

Solution 2

maybe I'm late, but here is what I've found out having the same problem

switch order to those scripts

jquery datatables is supposed to be first, then the bootstrap version, that will fix the button problem, I know it works because when adding dataTables.bootstrap.min.js I accidentally removed jquery.dataTables.min.js made the mistake of adding it the way you have in your source code and it didn't work until I switched them

27,693

Author by

bayuforest

Programmer

Updated on March 12, 2020

Comments

bayuforest about 4 years

I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: http://getbootstrap.com/

I'm using DataTables example from here: https://datatables.net/examples/styling/bootstrap.html

This is what I expected:

But this is what I get:

Here is my code:



<head>
	<!-- Bootstrap -->
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Bootstrap theme -->
	<link href="css/bootstrap-theme.css" rel="stylesheet">
	<!-- Datatable css -->
	<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
	<link href="css/jquery.dataTables.min.css" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="theme.css" rel="stylesheet">
</head>
<body>
	<!-- some other stuff and html code here -->

	<!-- and, at the end of page, I have: -->
	<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/docs.min.js"></script>	
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="js/ie10-viewport-bug-workaround.js"></script>
	<script src="js/jquery-1.12.0.min.js"></script>
	<script src="js/dataTables.bootstrap.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script>
		$(document).ready(function() {
			$('#example').DataTable();
    		} );
	</script>
</body>

Did I missed something? I've tried to compare my code and example code from example here: https://datatables.net/examples/styling/bootstrap.html

but still no found any different

edit: I add theme.css to my page, it only like this:

body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}