Datepicker is not seen on all records using pagination with datatable

shar_kumar

per my requirement.
I am using datatable, datepicker, pagination, row span.
I need grouping and first row should show datepicker rest all should not under that group of records. Which is working fine. But after adding code for grouping, Datepicker doesnot show on moving to next page(using pagination) in datatable.
if I have 4 pages in datatable...1 of 4 will display datepicker and rest all pages do not show datepicker at all.
Please help me out. I am copying my code here.

list of .js and .css added:

<v:base title="${pageTitle}"
css="css/jquery-ui.css,css/jquery.dataTables.css "
script="js/jquery-1.11.1.js,js/jquery.js,
js/jquery-ui.js,
js/jquery.dataTables.js,
js/jquery.dataTables.min.js,js/fnPagingInfo.js,
jquery-1.11.1.min.js">

script:

<script>                        
    $(document).ready(function() {
    var table = $('#dtable').DataTable({
     "columnDefs": [ { "visible": false, "targets": 2 }],                           "scrollY": "400px",
    "displayLength": 10,
    "ordering": false,
    "lengthMenu":[10,20,30],
    "drawCallback": function ( settings ) {
         var api = this.api();
         //alert("api value...."+api);
         var rows = api.rows( {page:'current'} ).nodes();
         var last=null;
      api.column(2, {page:'current'} ).data().each( function ( group, i ) {
         if ( last !== group ) {
            $(rows).eq( i ).before(
           '<tr class="group"><td align="left" colspan="12"><b>Voucher #: '+group+'<\/b><\/td><\/tr>'
            );
           last = group;
         }
     } );
             }
           } );

 

         $('#dtable tbody').on( 'click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
        table.order( [ 2, 'desc' ] ).draw();
    }else {
        table.order( [ 2, 'asc' ] ).draw();
    }
        } );




$('#mirDate_<s:property value="%{#summ.index}">')
    .datepicker({
     showOn: "both",
    dateFormat: "mm/dd/y",
    constrainInput: false,
    beforeShow: function (element, obj) {
    var offset = $(element).offset();
    window.setTimeout(function () {
    var calendarWidth = obj.dpDiv.width();
    var EleWidth = $(element).width();//+ parseInt($(input).css('padding'));
    obj.dpDiv.css({ top: (offset.top) + 'px',
         left: (offset.left - calendarWidth - EleWidth + 10) + 'px' })
    }, 1);
    }
    });

} );
</script>

ThomD

Can you edit your post to make the code format correctly?

ThomD

note the instructions at the bottom of this box about how to highlight code snippets uses tick marks

shar_kumar

Thanks ThomD. I formatted my code. Can you please take a look at it.

ThomD

it is a timing problem. that call for Jquery to add the date picker only runs one time. When the next page comes up, that call is not run again. One solution is to wrap a function around that jQuery call and run that function every time datatables redraws the page. I use a similar idea to put onClick events on some cells.

dtTable.on('draw', function () {
        applyOnClickEvents();
}


function applyOnClickEvents() {
//make some cells editable - this is for select fields      
    $('#Ratings tbody').on( 'click', 'td.dt-edit', function (e) {
        dtEditor.inline( this );                
    }); 
}

shar_kumar

Hello ThomD,

I added your script at the bottom of my script. here it is. but it is not working. Can you suggest me what other changes that I need to make to my code.

$('#dtable tbody').on('draw', function () {        
      applyOnClickEvents();
}); 
function applyOnClickEvents() {
      $('#dtable tbody').on( 'click', 'td.dt-edit', function (e) {        
     dtEditor.inline( this );                    
      }); 
}

ThomD

My code is an example of how to I need to apply my events triggered by the Draw event. You need to alter it so that is applies your code.

shar_kumar

Sure. But I was not sure how to alter the same as I am new to jquery and datatables.