Question

161

DataTables pagination style doesn't styled as bootstrap theme

rated 0 times [ 167] [ 6] / answers: 1 / hits: 32691 / 8 Years ago, mon, march 14, 2016, 12:00:00

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;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

iyannae

Add To Favorites

Follow

Total Points: 147

Total Questions: 88

Total Answers: 120

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 8 Years ago willieelisham · Accepted Answer

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>