Change the template of some generated elements (e.g. pagination)

Azylak

Hey everyone,

I've been trying to get my head around some things, but I can't seem to change it in the way I want it. So below is the generated output for the pagination. How is it possible to change the output?

<div class="top">
  <div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
      <a class="paginate_button previous disabled" aria-controls="dataTable" data-dt-idx="0" tabindex="0" id="dataTable_previous">Previous</a>
      <span>
        <a class="paginate_button current" aria-controls="dataTable" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="dataTable" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="dataTable" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="dataTable" data-dt-idx="4" tabindex="0">4</a>
       </span>
       <a class="paginate_button next" aria-controls="dataTable" data-dt-idx="5" tabindex="0" id="dataTable_next">Next</a>
   </div>
  <div class="clear"></div>
</div>

Let's say I want the generated output to be like this;

<div class="top">
  <ul class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
    <li><a class="paginate_button previous disabled" aria-controls="dataTable" data-dt-idx="0" tabindex="0" id="dataTable_previous">Previous</a></li>
    <li><a class="paginate_button current" aria-controls="dataTable" data-dt-idx="1" tabindex="0">1</a></li>
    <li><a class="paginate_button " aria-controls="dataTable" data-dt-idx="2" tabindex="0">2</a></li>
    <li><a class="paginate_button " aria-controls="dataTable" data-dt-idx="3" tabindex="0">3</a></li>
    <li><a class="paginate_button " aria-controls="dataTable" data-dt-idx="4" tabindex="0">4</a></li>
    <li><a class="paginate_button next" aria-controls="dataTable" data-dt-idx="5" tabindex="0" id="dataTable_next">Next</a></li>
  </ul>
  <div class="clear"></div>
</div>

Do I have to dive into the js file? Or is there an easier way?

allan

Generally you would need to modify the DataTables core file. You could alternatively use the draw callback to modify the DOM on draw (i.e. when the paging has been updated) or create a paging plug-in that creates the DOM structure you want.

Allan