How to prepend a content permanently inside a div of jquery data table?

Question

Actually, I have used the jquery data table and its working as expected. But am planning to do some customizations. So I have made a span with buttons (for selecting how many data to be displayed in a page - am changing the existing dropdown design to the button). I have used jquery prepend() to place inside a div. The particular div is generating dynamically by the data table. on the initial load, it works perfectly. It was prepended. But after selecting the paginate button its not displaying that span(contain buttons).

jquery prepend:

$('#PerPageRow').prependTo('#example_Paginate');

span of buttons

<span>items per page 
<button type="button" value=10>10</button>
....
</span>

output: items per page 10 25 50 < 1 2 3 4 5 > .

Working example: HTML:

<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
....
<tbody>
<table>

jquery:

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

Answer 1

You can not prependTo inside example_paginate element becuase of datatable draw on each action so example_paginate element each times set as new pagination elements so inside this div other elements will remove so need to use before() method.

I hope below snippet will help you lot.

var oTable; //global variable to hold reference to dataTables
var oSettings; //global variable to hold reference to dataTables settings
$(document).ready(function() {
  oTable = $('#example').DataTable({
    "language": {
      "paginate": {
        "next": "→", // or '→'
        "previous": "←" // or '←' 
      }
    },
    initComplete: function(settings, json) {
      $('#example_paginate').parent().css('text-align','right')
      $('#example_paginate').css({
        'display':'inline-block',
        'vertical-align': 'middle',
        'float':'none'
      });
      $('#example_paginate').before($('#PerPageRow'));
    }
  });//store reference of your table in oTable
  oSettings = oTable.settings(); //store its settings in oSettings
});

$(document).on('click', "#PerPageRow button", function(){
  oSettings[0]._iDisplayLength=Number($(this).val()); //set it value
  oTable.draw();  //draw the table
});

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</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>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
  </tbody>
</table>

<span id="PerPageRow">Items per page 
  <button type="button" value="2">2</button>
  <button type="button" value="4">4</button>
  <button type="button" value="6">6</button>
</span>