Невозможно изменить стиль таблиц данных Bootstrap

Я пытаюсь использовать эту bootstrap datatable в Django:

<script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function () {
    $('#mydatatable').DataTable();
});
</script>

Но когда я пытаюсь изменить положение текстов по умолчанию, оно не применяется. Это divs по умолчанию с bootstrap. Я нашел их в chromes inspect part. Я хочу изменить их:

<div class="dataTables_info" id="mydatatable_info" role="status" aria-live="polite">Showing 1 to 10 of 22 entries</div>


<div class="dataTables_paginate paging_simple_numbers" id="mydatatable_paginate"><a class="paginate_button previous disabled" aria-controls="mydatatable" data-dt-idx="0" tabindex="-1" id="mydatatable_previous">Previous</a><span><a class="paginate_button current" aria-controls="mydatatable" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="mydatatable" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="mydatatable" data-dt-idx="3" tabindex="0">3</a></span><a class="paginate_button next" aria-controls="mydatatable" data-dt-idx="4" tabindex="0" id="mydatatable_next">Next</a></div>

Мой фактический html файл:

 <div class="table-keep">
      <div class="container">



        <h1>My Table</h1>



          <table class="table" border=1 id="mydatatable">


            <thead>
              <tr>

                <th>Name</th>
                <th>Age</th>
                <th>School</th>
                <th>Phone Number</th>
                <th>Email</th>

              </tr>

            </thead>
            <tbody>
              {% for x in x_list %}

                  <tr>
                      <td>{{x.name}}</td>
                      <td>{{x.age}}</td>
                      <td>{{x.school}}</td>
                      <td>{{x.phone}}</td>
                      <td>{{x.email}}</td>
                  </tr>


              {% endfor %}



            </tbody>
          </table>


        </div>
      </div>


  <!-- Need to have JQuery and Javascript for DropDown Actions to work -->

  <script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
  <script>
  $(document).ready(function () {
      $('#mydatatablem').DataTable();
  });

Как я могу захватить и изменить стиль #mydatatable и кнопок выше?

Вернуться на верх