I understand the Tailwind support is not officially 'ready' so I am not looking for a solution, only an idea of timeline (if you can give them).

I was using the datatables with the Tech Preview of TailwindCSS support and it works well, Thanks! However, if I turn on 'Scroller' it appears to have CSS that conflicts with the TailwindCSS tech preview CSS. So my question is really to ask if there is any plans to expand TailwindCSS support to the extensions ?? and if there is, are you in a position to give an idea of timescales?

I may take a stab and editing the Scroller CSS myself, but I am no CSS expert

Thank you guys for all you do.

Here is the code:

    $(document).ready(function() {

        fatherTable = $('#example').DataTable({

            stateSave:      false,
            serverSide:     true,
            fixedHeader:    false,
            dom:            'frtlip',
            info:           false,
            select: {
                            info: false
            },
            ajax: {
                            url: "myurl.php",
                            type: 'POST',
                            data: function ( d ) {
                                d.csrf_token = "<?=$csrf1=CSRF::generate('products')?>";
                            }
            },
            columns: [

                {   //0
                    title:      '',
                    data:       "data_ADR.data_ADR_id",
                    render:     function( data ) {return '<span class="collapse">' + data + '</span>'},
                    width:      '8px'
                },
                {   //1
                    title:      '(1)',
                    data:       "data1",
                    width:      '35px'
                },
                {   //2
                    title:      '(2)',
                    data:       "data2",
                    width:      '120px'
                },
                {   //3
                    title:      '(3a)',
                    data:       "data3",
                    width:      '35px'
                },
                ...
                {   //24
                    title:      '',
                    data:       "data24"
                }
            ],
            buttons: [                  
                'colvis' /*'copy', 'excel', 'csv',*/ 
            ],
            responsive:         false,
            **scrollx:                     true,**
            orderFixed:         [[ 1, "asc" ]],
            ordering:           false,
            paging:             true,
            lengthMenu:         [[1,5,10,100], [1,5,10,100]],
            pageLength:     10,
            lengthChange:   false,
            processing:         false,
            colReorder:         false,
            initComplete:       function( settings, json )   { 
var thead = $('#example thead');

var newRow = $('<tr>');
    newRow.append('<th data-title=""></th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1');?>"></th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T2');?>">3.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T3a');?>">2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T3b');?>">2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T4');?>">2.1.1.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T5');?>">5.2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T6');?>">3.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T7a');?>">3.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T7b');?>">3.5.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T8');?>">4.1.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T9a');?>">4.1.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T9b');?>">4.1.10</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1011') . '-' .$ADMIN['lng']->t('ADR', 'T10');?>">4.2.5.2, 7.3.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1011') . '-' .$ADMIN['lng']->t('ADR', 'T11');?>">4.2.5.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1213') . '-' .$ADMIN['lng']->t('ADR', 'T12');?>">4.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1213') . '-' .$ADMIN['lng']->t('ADR', 'T13');?>">4.3.5, 6.8.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T14');?>">9.1.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T15');?>">1.1.3.6 (8.6)</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T16');?>">7.2.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T17');?>">7.3.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T18');?>">7.5.11</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T19');?>">8.5</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T20');?>">5.3.2.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T21');?>">3.1.2</th>');
thead.prepend(newRow);

var newRow = $('<tr>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T8');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T9a');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T9b');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T10');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T11');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T12');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T13');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T16');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T17');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T18');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T19');?></th>');
thead.prepend(newRow);

    var newRow = $('<tr>');
    newRow.append('<th rowspan="2"></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T1');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T2');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T3a');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T3b');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T4');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T5');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T6');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T7a');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T7b');?></th>');

    newRow.append('<th colspan="3"><?=$ADMIN['lng']->t('ADR', 'T89');?></th>');

    newRow.append('<th colspan="2"><?=$ADMIN['lng']->t('ADR', 'T1011');?></th>');

    newRow.append('<th colspan="2"><?=$ADMIN['lng']->t('ADR', 'T1213');?></th>');

    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T14');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T15');?></th>');

    newRow.append('<th colspan="4"><?=$ADMIN['lng']->t('ADR', 'T16171819');?></th>');

    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T20');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T21');?></th>');
thead.prepend(newRow);





fatherTable.responsive.rebuild();
fatherTable.columns.adjust().responsive.recalc();   

                                }

        });

    });

The table was working fine. Since the header is very complex, I add a header to it in the "initComplete" function at the end of loading. The eader has 3 rows, and it has grouped elements.

Until before I added "scrollx: true", everything was working fine. By activating SCROLLX, my complex header is no longer loaded (or is removed).

Do you have any suggestions how I can load a large table, with a complex header?

I also tried the "responsive: true" function, and it would solve all my problems, the only problem is that "responsive" no longer works well when I put my 3 rows of complex header.

Nowadays, you have to make sure that the tables are viewable from the phone as well.

Ideas? Solutions?

Summarize: The problem arises from my complex header

• ScrollX non mi carica le mie tre righe di header
• Responsive non funziona bene con un header complesso

Thanks in advance for your answer and have a nice day.

To try and speed it up, I have partially implemented server-side processing, with Scroller, at https://fplform.com/fpl-manager-ranking-ssp.

I have 3 issues and questions about it:

1. My code to rank empty cells at the bottom when doing an ascending search (based on absoluteOrder and absoluteOrderNumber) does not work. How much work is this likely to be to implement on the server-side (assuming it can be done), and has anyone got an example of it?
2. My code to make the first column always be an ascending rank only works until the first "Loading..." operation (i.e. If you scroll down quickly, it breaks). Could that be implemented on the server-side?
3. I really like how the client-side version fills the browser. By comparison, from a usability perspective, I don't like using scrollY and scrollX as much, especially having to limit the height of the table to ensure it can be seen on all displays. And I don't really want to use actual pagination. Is it feasible to use server-side processing with the full-browser-scrolling approach, or are scrollY and scrollX simply required for it to work at all?

I'd also be interested in others' impressions of the loading speed for my current client-side version (to help decide if it's worth the effort to pursue server-side processing any further)?

Ref. #1 & #2, here's my existing code:

//Empty Twitter handles at bottom
var twitterType = $.fn.dataTable.absoluteOrder( [
   { value: '', position: 'bottom' }
 ] );

//Empty number cells at bottom
var numbersType = $.fn.dataTable.absoluteOrderNumber( [
    { value: '', position: 'bottom' }
] );

//Make the first column an ascending rank that never changes
table.on( 'order.dt search.dt', function () {
    table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

We noticed that the scroller has virtualization enabled, but it does not seem to work with static pagination and instead is only intended to be an "infinite" scroller. Since it's a business demand to keep our static pagination, it does not seem to be the right solution.

Is there a way to use the Scroller with "static" pagination (fixed number of rows per page) or is there another virtualization solution for DataTables?

We have just about everything working on our site which is about to go live, but we really need scroller (infinite scrolling) to work. We are using server side processing and will have millions of records.

We have quite a few custom filters and using the # of records out of ### of records to show how the different filters are working.

Unfortunately when we implement the scroller, those numbers go away and a (NaN) appears. I suspect we also have something messed up as the pagenation is still on at the bottom the entire table.

Allen has the login information for the site and we were working with him.

There is no easy way to show the the full test code / example.i will link what I think is the relevant section to see if there is something blatant wrong. Thanks so much for your time.

We would like to find a contractor who is very familiar with DataTables tomreview our main 1 page. It is complex, and we just need to make sure we are doing everything as best we can before launch. Thank

$(document).ready( function () {

    var title;
  
    var editor3 = new $.fn.DataTable.Editor({

               "processing": true,
               "serverSide": true,
// --------------------- NEED TO FIX -------------------------------------
//                scroller:    true,
//                deferRender: true,
//                scroller: {
//                             loadingIndicator: true
//                             },
//          scrollCollapse: true,
// --------------------- NEED TO FIX -------------------------------------

        ajax:  "/DataTables/myplace.php",
            table: "#sort_table3",
            fields: [
 
                
         ]
     }); 

    var table3 = $('#sort_table3')
        .DataTable( {
            ajax: {
                url: '/DataTables/myplace.php',
                data: function (d) {
                    d.anyDay = anyDay;
                    d.MyListings = MyListings;
                },
                                error: function (xhr, error, code)
                                {
                                      console.log(xhr);
                                      console.log(code);
                                }
            },
                       "language": {
                               "info": "Showing _START_ to _END_ of _TOTAL_",
                                "infoFiltered": "(from _MAX_)"
                        },

//               "processing": true,
//               "serverSide": true,
// --------------------- NEED TO FIX -------------------------------------
//                scroller:    true,
//                deferRender: true,
//                scroller: {
//                             loadingIndicator: true
//                             },
//          scrollCollapse: true,
// --------------------- NEED TO FIX -------------------------------------

//                        search: false,
//                        info: false,
//                        dom: 'lrt',
            responsive: true,
            scrollX: true,
//          scrollY: 800,

//                        search: {"search": myCleanSearch},
            pageLength: 10,
                        lengthMenu: [
                [ 10, 20, 30, 40, -1 ],
                [ '10 rows', '20 rows', '30 rows', '40 rows', 'Show all' ]
            ],
            dom: '<"row row_3 row"FiB>rtp', // "F=Custom, Q=Adv Search, l=Page length, r=pRoccessing wait, t=table, i=Bottom info # of entries, p=Bottom Pages, B=Buttons?",
            type: "upload",
            columns: [

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Thanks,
Kumar

Once i click pagination button or any Column - i see columns are re-arranged and looks good.

Code: <uploaded in Github>
let table = $('#agentSelectionTable').DataTable({
data: availableAgents,
scrollY: 150,
deferRender: true,
scroller:true,
"columns": [{
"data": "userName"
},
{
"data": "firstName"
},
{
"data": "lastName"
},
{
"data": "startDate"
},
{
"data": "endDate"
},
{
"data": "replacementAgent"
},
{
"data": "comment"
}
],
columnDefs: [{
targets: 6,
render: $.fn.dataTable.render.ellipsis(20)
}
],
"createdRow": function (row, data, index) {
if (data.replacementAgent != "") {
$('td', row).eq(5).addClass('highlight');
}
}
});

Any idea why it is behaving like this

What is a common way to solve the problem? How to make rows extend to the scrollbar width?

Error messages shown:
None

Description of problem:
When scroller is enabled in combination with state save and search builder, rows are not drawn as you scroll through the table. You might need to refresh the page after loading the first time to see the behaviour. Disabling search builder or state save seems to fix the issue.

I have a Datatable scroller configuration with
serverside:true,
scrollY: "400px"
scroller: true

But while scrolling the table the ajax call to fetch data is not getting triggered.
If I change the scrollY value to 200px it works.

My table height has to adjust to the screenheight and 200px will look very small

For now
I achieved this by a workaround
setting scrollY to 200
When data loads after a 1 sec(1000ms) interval I am setting height of the table to adjust with the screen

Need your thoughts on a solution for this

--

Need your help on something I am figuring out from few days and unable to do that.
I have tried multiple things, used multiple jquery plugins and many github libraries to achieve the desired result but unfortunately now I am lost.

Please help me!!!

This is the Jsfiddle -
https://jsfiddle.net/piyushpranjal/tkzd6a0g/4/

This is what I am trying to achieve-
https://i.stack.imgur.com/mvYi0.png

Any sort of help is truly appreciated, thanks in advance.

I have successfully set up serverside processing, such that my API will use the start and length queries to determine which data to send, although, I can't for the life of me get Scroller to work. All that happens is simple pagination.

I tried to recreate the serverside scroller example, linked here.

I used the exact same code there, but I am still only returning pagination, see my JSBin here.

Does anyone know what I am doing wrong? I have included the CDN for scroller as well. I am lost here and have spent way too much time getting no where here.

Any help is greatly appreciated...

My code:

var table_admin_equipos = $('#table_admin_equipos').DataTable( {
        language: datetable_languaje,
        autoWidth: true,
        scrollTop: true,
        scrollY: 200,
        scrollX: true,
        select: {
        style: 'single',
        selector: 'td:nth-child(1), td:nth-child(2), td:nth-child(3), td:nth-child(4)'
         },
        "columnDefs": [
        {
          "targets": [6,7,8,9,10],
          "visible": true,
          "sorting" : false,
          "searchable": false
        },
        {
          "targets": [0],
          "visible": false,
          "sorting" : false,
          "searchable": false
        },
        ],

        pageLength:25,


        preDrawCallback: function (settings) {
          var api = new $.fn.dataTable.Api(settings);
          var pagination = $(this)
          .closest('.dataTables_wrapper')
          .find('.dataTables_paginate');

          if (api.page.info().pages <= 1) {
            pagination.hide();
          }
          else {
            pagination.show();
          }

        }
    });

Please someone help me

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

          var table = $('#dadosCadastrais02').DataTable({
             searching: false,
             info: false,
             scrollX: true,
             "scrollX": true,
             paging: false,
             ordering: false,

         });
     });

The Asp.Net Code:

       <asp:Repeater ID="rptValidadorD02" runat="server"  >
                     <HeaderTemplate>
                             <table id="dadosCadastrais02" class="table table-striped table-bordered" style="width:100%" >
                 <h5>DADOS CADASTRAIS</h5>
        <thead>
        <tr>
            <th>Status Validação</th>
            <th>Tipo de Registro</th>
            <th>Seqüencial</th>
            <th>Tipo da pessoa</th>
            <th>Tipo do proponente</th>
            <th>CPF/CNPJ</th>
            <th>Tipo CPF</th>
            <th>Nacionalidade</th>
            <th>Nome</th>
        </tr>
    </thead> 

  <tbody>   </HeaderTemplate><ItemTemplate> 
       <tr>
            <td><%# DataBinder.Eval(Container.DataItem,"status02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipoderegistro02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"sequencial02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipodapessoa02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipodoproponente02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"cpfCnpj02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"tipocpf02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"nacionalidade02") %></td>
            <td><%# DataBinder.Eval(Container.DataItem,"nome02") %></td>

        </tr>
     </ItemTemplate> 
    <FooterTemplate>                            
    </tbody>
 </table></FooterTemplate>


                        </asp:Repeater>

https://datatables.net/extensions/scroller/

But I have not experience in managed this kind of issues.
I am quite new to this, so I ask you, if you can spare a little time to tell me step by step how to do it.
Thank you very much.

This is the table that I need to put scroll vertical.
https://monitorsdelleure.cat/ofertes/

Also, do you know how to delete or zip the spces btween lines?

If you dont want / can, sorry for this question.
I will continues investigating to find the best method for do it.

Thank you.

If I don't have scroller enabled and search for "123" I get this view

If I enable it I get this view

Why is it shrinking the height of the table and adding a scroll bar?

I am also using the 'row group' plugin

Regards
Darren

        deferRender:    true,
    scrollY:        200,
    scrollCollapse: true,
    scroller:       true,
        fixedHeader: true,

Is there changing code in "jquery.Datatable.js" or the code below. So, the scrollY can work.

here is the code :

$('#tabelpengguna').DataTable({                    
                    "processing": true,
                    "serverSide": true,
                    scrollY:        persen_height,
                    deferRender:    true,
                    scroller:       true,
                      scroller: {
                        loadingIndicator: true
                      },
                    "ajax":{
                               "url": "cobatable_ajx.php",
                               "dataType": "json",
                               "data":{
                                        "cekautoexc": 1
                                      },
                               "type": "POST",
                             },
                    "columns": [
                          { "data": "0" },
                          { "data": "1" },
                          { "data": "2" },
                          { "data": "3" },
                          { "data": "4" },
                          { "data": "5" },
                          { "data": "6" },
                          { "data": "7" },
                          { "data": "8" },
                          { "data": "9" },
                          { "data": "10" },
                          { "data": "11" },
                          { "data": "12" },
                          { "data": "13" },
                          { "data": "14" },
                          { "data": "15" },
                          { "data": "16" },
                          { "data": "17" },
                          { "data": "18" },
                          { "data": "19" },
                      ] ,
                     "aaSorting":[],
                    "aoColumnDefs": [
                          { "bVisible": false, "aTargets": [ 0 ] }
                        ],
                    "bJQueryUI":true,
                    "bFilter": true,
                    "bPaginate":true
                    
                    
                });

Note : If i'm using DataTable 1.10.25, the scrollY in serverside works. i have try it. But i can't change version because the display not same with Datatable 1.10.8 (like the header,footer not same). i'm using JqueryUI with bootstrap 2.3.

Thank You,

Bambang

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hi!

I have a question about the dataTables_info div. This is the one on the bottom-left part of the table that shows "Showing X to Y of N entries".

I'm noticing by default that the "Y" value is double of the rows in the viewport of what my table is. So in other words, say my table loads with 10 rows by default...it'll say "showing 1 to 20 rows...". Then - upon scrolling down it'll keep this 20 row range.

I noticed upon resizing the window (even just minimizing and re-maximizing) ..that the correct value of "showing 1 to 10 rows.." is displayed.

I'm using scrolly:730px and I have all my rows' no-wrap enabled so that they are the same height. Anybody know what's going on?

Thanks!

Description of problem: For listing log messages, we initially show all log entries sorted by date and scroll to the bottom (most recent). We want to use search to locate a log entry and then have clicking on the row clear the filter and scroll to the row we clicked on so we can review the adjacent log entries around the entry we clicked on in the filtered list. I lack jQuery expertise and haven't found any examples to do this...suggestions would be most appreciated.

Thanks

I want to use a given event to increase an integer variable while leveraging (ajax) server side

for example if the scroll reaches the lowermost, it re fetches ajax data. it goes so on and so forth until no data is received

code example:

let page = 1
$('#my-table').DataTable({
    scroller: true,
    ajax: `${apiUrl}/mydata?page=${page}`
})

AFAIK, it's all doable with such events