Unable to selected other rows except first on Datatables with Iphone

Question

Good afternoon. I use this code to select a row in a jQuery datatable :

<script type="text/javascript">
            $(document).ready(function () {
                var table = $('#empTable').DataTable();
                $('#empTable').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    } else {
                         $('#clientescelto').val(this.cells[0].innerHTML);
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });

            });
</script>

It work fine (I can select any row of my datatable) both on Windows browsers and Apple Tablet. But on Iphone I'm able only to select the first row of the list, I've not effects trying to select other rows.

Any idea?

Thanks

Chico

I've tried on other Iphone models, but the problem is not solved.

Answer 1

The div containing your pagination links is covering the rows on mobile screens so you can't select them (you are clicking on the invisible pagination container div instead). Also, that pagination menu is off-center on all screens. So here are changes that will solve both of these problems.

First, change the HTML of the row containing the pagination container from this:

<div class="row">
  <div class="col-sm-5"></div>
  <div class="col-sm-7">
    <div class="dataTables_paginate paging_simple_numbers" id="empTable_paginate">
      <ul class="pagination">
        <li class="paginate_button previous disabled" id="empTable_previous"><a href="#" aria-controls="empTable" data-dt-idx="0" tabindex="0">Previous</a></li>
        <li class="paginate_button active"><a href="#" aria-controls="empTable" data-dt-idx="1" tabindex="0">1</a></li>
        <li class="paginate_button next disabled" id="empTable_next"><a href="#" aria-controls="empTable" data-dt-idx="2" tabindex="0">Next</a></li>
      </ul>
    </div>
  </div>
</div>

to this:

<div class="row">
  <div class="col-sm-12">
    <div class="dataTables_paginate paging_simple_numbers" id="empTable_paginate">
      <ul class="pagination">
        <li class="paginate_button previous disabled" id="empTable_previous"><a href="#" aria-controls="empTable" data-dt-idx="0" tabindex="0">Previous</a></li>
        <li class="paginate_button active"><a href="#" aria-controls="empTable" data-dt-idx="1" tabindex="0">1</a></li>
        <li class="paginate_button next disabled" id="empTable_next"><a href="#" aria-controls="empTable" data-dt-idx="2" tabindex="0">Next</a></li>
      </ul>
    </div>
  </div>
</div>

Next, either find these lines in the CSS and update it to what I have here, or add this to the end of your stylesheet (or into the page itself):

<style>
.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: center;
    padding-top: 0.25em;
    width: 100%;
}
@media screen and (max-width: 767px){
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: center;
    display: block;
  }
}
</style>