I grouped the datatable table as shown. But when I tried to output the PDF, this grouping does not appear in the PDF output.

Please Help Me!! Tahnk you in advance

I use datatable with Backbone.marionette. First showng is working correct. After data fetch table show all items, but I need to show 8 items always.

onAttach() {
$('#table').DataTable({
searching: false,
lengthChange: false,
pageLength: 8,
saveState: true,
language: {
info: "START - END из TOTAL",
infoEmpty: "",
paginate: {
"next": "next",
"previous": "previous"
},
}
});
},

I know this question had been asked many times before, but solutions i find doesn't work for me.

here is my code

```$(document).ready(function(){
//draw: 0, recordsTotal: 11 - i get this from the json response when i execute this
$(document).on('click', '#view', function(){
$.ajax({
url: url,
dataType: "json",
success: function(data){
console.log(data);
$('#data-table').DataTable({
destroy: true,
processing: true,
serverSide: true,
pageLength: 1000,
responsive: true,
dom: '<"html5buttons"B>lTfgitp',
ajax: {
url: url
},
order: [1, "ASC"],
columns: [
{ data: "col_one" },
{ data: "col_two" }
]
});
console.log($.fn.DataTable.isDataTable( '#data-table' ));
},
error: function(output){
console.log(output);
}
})
});
// im trying to pull something here then reload the contents of the table above
// draw: 2, recordsTotal: 11 - i get this from the response
$('#getdata').on('submit', function(e){
e.preventDefault();

    $.ajax({
        url: url,
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        dataType:"json",
        success: function(data){
            console.log(data);
            $('#data-table').DataTable().ajax.reload(function(a){
                console.log(a);
            }, true);
            console.log($.fn.DataTable.isDataTable( '#data-table' ));
        },
        error: function(output){
            console.log(output);
        }
    })
});

})```

it sends the correct stream of data im getting and there are no errors on the console.
i was able to pull this off with one datatable on the same page but doesn't seem to work with this one.
both datatables have separate methods and routes. im sure the solution is not that complex, i just can't seem to figure it out

I encountered display problems in Firefox when I'm using a grid layout. I created a test file where I only placed one grid element.

As you can see, it creates a horizontal scrollbar instead of hiding another column.

Even IE does it correct

You can test it yourself at
http://2019.hockeyarenas.net/DataTable.html

The "full" file is here (page still under development though) which works fine unter Chrome, but not under Firefox (IE grid not yet implemented, therefore not working on IE):
http://2019.hockeyarenas.net/?page=0300&lang=en

As you can see, the table content is too wide (wider than all the other grid elements).

Any idea how to overcome/fix this problem?

css of the test file

    @charset "utf-8";
    Body { 
        font-family: verdana, arial, helvetica, sans-serif;
    }
    .titlebar_right {
        color: white;
        margin: 0px 0px 10px 0px; 
        padding: 2px 2px 2px 2px;
        background: rgb(39,74,114);
        background: -webkit-gradient(linear, left top, right top, from(rgba(39,74,114,1)), color-stop(20%, rgba(37,75,114,1)), color-stop(50%, rgba(65,104,137,1)), color-stop(80%, rgba(37,75,114,1)), to(rgba(39,74,114,1)));
        background: -o-linear-gradient(left, rgba(39,74,114,1) 0%, rgba(37,75,114,1) 20%, rgba(65,104,137,1) 50%, rgba(37,75,114,1) 80%, rgba(39,74,114,1) 100%);
        background: linear-gradient(90deg, rgba(39,74,114,1) 0%, rgba(37,75,114,1) 20%, rgba(65,104,137,1) 50%, rgba(37,75,114,1) 80%, rgba(39,74,114,1) 100%); 
        border-radius: 4px;
    }     

    main {
        display: block;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        grid-area: content;
        background-color: white;
        border-radius: 8px;
        -webkit-box-shadow: 1px 1px 4px 0 #595959;
          box-shadow: 1px 1px 4px 0 #595959;     
        padding: 3px 0px 3px 0px;    
    }

    body {
        margin-left : 0px;
        margin-right: 2px;
        margin-bottom : 2px;
        margin-top : 0px;    
        font-size: 10px;    
    }
    
    .container {
      display: -ms-grid;
      display: grid; 

          grid-template-areas:
        "content";    

      -ms-grid-rows: auto;    

      grid-template-rows: auto; 
      -ms-grid-columns: 1fr; 
      grid-template-columns: 1fr; 
      grid-gap: 2px;

      height: 100vh;    
    }

HTML of the test file

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="content-type" content="text/html;charset=utf-8">
        
<link href="inc/v4_css/style_v2_datatables_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
 <TITLE>DataTable Test</TITLE>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
          
<script type="text/javascript">      
    $(document).ready(function() {

        $('#arenas').DataTable( {
                    aLengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    iDisplayLength: 25,
                    language: {
                        url: '/inc/DataTables/de.txt'
                    },
                    responsive: true 
                } );
    } );           
</script>                
</head>
    <body>
        <div class="container">
            <main>
                <h1 class="titlebar_right"><span class=''>Container / Main</span></h1>
                <table class='display nowrap' id='arenas' style='width: 100%;'>
                    <thead>
                        <tr>
                            <th data-priority="1">Land</th>
                            <th data-priority="1" class="word_break"><div align="left">Stadion</div></th>   
                            <th data-priority="3"><div align="left">Ort</div></th>
                            <th data-priority="4"><div align="left">Team</div></th>
                            <th data-priority="2">Kapazität</th>
                            <th>Bau</th>
                            <th></th>
                    </tr></thead><tbody>
                    <tr>
                        <td>(logo)</td>
                        <td><a href="?page=3000&arID=4362" target="_parent" >Centre Sportif Robert-Lebel</a></td>
                        <td>Chambly</td>
                        <td></td>
                        <td>
                            <div align="right">
                                1'200</div>
                        </td>
                        <td>
                            <div align="right">
                                1972</div>
                        </td>
                        <td>
                            <div align="right">
                                </div>
                        </td>
                    </tr>
                </table>
            </main>
        <div class="container">
    </body>
</html>

INTRO
I ran into strange problem: my datatable is showing "Showing 11 to 10 of 10 entries " which is obviously nonsense. I think this could be kind of bug.

I am using PHP server side processing, stateSave: true, resetDisplay: false, processing: true, serverSide: true and some others which I believe are not important.

Let's assume I am showing just some active data, 11 records in total, page length 10 rows => 2 pages withou filter.
When I go to some editation form directly from datatable **second ** page and deactive one record and go back, I am getting message you can see above. AJAX parameters are start:10 and length:10.

Obviously, datatable tries to load / thinks I am still on second page which "doesn't exist" anymore.

The question is how can I handle this. I can handle it on server side like:

if (filteredCount === offset) {
offset = 0;
}

but I am still getting bad message. Thx for your thoughts!

Hi guys,

I wondered if width=100vw is a better option than width=100% for .DTE in the standard datatables css download.

I implemented Select2 on a responsive design. If the content of Select2 is wider than the view area of the form (say for mobile), then the Select2 field expands beyond the view area to accommodate the size of the text... this could also take form controls out of view.

I determined the form container

<div class="DTE DTE_Action_Create">EDITOR FORM</div>

Examining the css:

.DTE {
  width=100%;
}

I changed the .DTE css class in my local css to

.DTE {
  width=100vw;
}

This caused the select2 to limit to the screen size including padding and seems to work better than width=100%.

I hope that is helpful to you and anyone else.

Hey there,

I need a help with responsive plugin.
I have really big table with lots of columns but responsive plugin hides all the columns under green "+" sign that are overflowing the screen size. I want to force them to stay on the screen with scroll bar and hide under green "+" sign only the last column.

According to the screenshot - I want to force showing:
- Customer
- Description
- Created at
- Created by
columns and only Actions column hide under the row.

Hello,

I have a datatable that has a context menu in which I select to add some data that appears in the column.

Once I do that, save to DB via ajax call and refresh the table, how can I ensure that user gets to the same page number instead of first page?

Thanks,

I have a method which uploads data to the server using Ajax and returns a json object on success that says whether to reload the table or not. The object returned is:

{"reload": true, "afterReload": "updateOnReload"}

The afterReload value can be any function name with the right signature.

The important part of the method is

table = $("mytable").DataTable();

//repsonse is the parsed json

if (response.reload) {
   table.ajax.reload(function(json){eval(response.afterReload(table)});
};

this works as expected and the function called is as follows

function updateOnReload(table) {

 if (!table.rows().count()){
    table.button("big_step:name").disable();
    table.button("filter_step:name").disable();
 }
 else {
    table.button("big_step:name").enable();
    table.button("filter_step:name").enable();
 };
};

The issue I am having is that table.rows().count() is not returning the correct count - it seems to call the row count prior to loading the data, rather than after.

any ideas?

Hi all, i want to show responsive view and another child row for ajax data. I want to implement something like this https://www.datatables.net/blog/2017-03-31#Ajax-request but with a button.

I tried to add a button with a class but the button does nothing.

i'm using aoColumns to render data, and i have several links for button. My button is actually a dropdown with many links.

$('#lc_dt body').on('click', 'manMrIf', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

nothing happens, my table is responsive so when i click on more info it has to close responsive but that does not work, i alos add alert(1) after

$('#lc_dt body').on('click', 'manMrIf', function () {

but i cant see alert

when i scroll vertically the header of the table will be fixed under the nav bar.. but the scroll bar will comes. and i scroll horizontally . the tables header only moves. the tbody will not moved.

I'm making date time difference between a date time from database and current time but it return string like:
PT6H8M38S
-PT42M57S

my code:

ar tdy= new Date();
var dt= tdy.getFullYear()+'-'+(tdy.getMonth()+1)+'-'+tdy.getDate();
var time= tdy.getHours() + ":" + tdy.getMinutes() + ":" + tdy.getSeconds();
var dateTimeJs= dt+' '+time;

var dateDTD= 2020-01-02 08:38:52

moment.duration(moment(dateTimeJs).diff(moment(dateDTD)))

I know this is not for moment js but i want to know is there a feature in datatable ?

This thread is for feedback of the SearchPane blog post.

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

• Full support for Bootstrap, Foundation, Semantic UI, etc.
• Server-side processing support (loading data from the server-side)
• Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
• Ordering of data to match the DataTable
• Search the search pane!
• Rebuild API method for selected columns
• Collapsible container
• Support for array based data
• Interfacing with the global search (difficult?)
• Selection options similar to Select (e.g. os and multi, etc.)
• Option to match column visibility (with or without Responsive?)

Hi. I'm using DataTables(+Responsive+FixedHeader) with Blazor. There is only one problem with FixedHeader package. It won't stick to top until a user interaction with table triggers table to rerender; like expanding/collapsing the row details(Responsive feature). Any ideas will be welcome.

Hey,

I'm using the new finished SearchPanes (it's awesome BTW) and utilizing the buttons feature and wanted to be able to show the end user if filters are set or not as a flag on the button itself. I didn't see any built in API to return the number of filters set. It would be helpful in connection with the stateSave so if they come back to the page after awhile, they'll know quickly if they have any filters.

I'm using a bit of a hacky way to do it, by pulling it down from the ".dtsp-title" div that displays it on the SearchPane itself but wanted to know if there was a cleaner way to do this, or if maybe an extra API function could be added?

Here's what I'm using now, the timeout is used since it seemed to be needed as the draw happened a bit too quickly and it would update the wrong value. I tried to utilize this thread, but it seems to be from an earlier version of SearchPane that doesn't work so much anymore:

https://datatables.net/forums/discussion/comment/152361/#Comment_152361

Here's my current solution (it's not great):

        table.on('draw', function () {
            setTimeout(function () {
                var filtersApplied = $('.dtsp-title').text();
                filtersApplied = filtersApplied.replace('Filters Active - ', '');
                $("#filterCount").text(filtersApplied);
            }, 500);
        });

The initComplete sets up the filterBtn with the badge:

            initComplete: function () {
                $(".createBtn").removeClass("btn-secondary").addClass("btn-success");
                $(".refreshBtn").removeClass("btn-secondary").addClass("btn-primary");
                $(".resetBtn").removeClass("btn-secondary").addClass("btn-danger");
                $(".filterBtn").removeClass("btn-secondary").addClass("btn-info");
                $(".filterBtn").append(' <span class="badge badge-light" id="filterCount">0</span>');
            }

Thanks for any help

My use case involves the following the following workflow:

• Default view table grid
• Click custom button to edit / add
• On custom button click hide grid, show form (no popup)
• Edit and submit form
• Form hides, grid shows.

Has anyone please got any pointers on how to do this making maximum use of datatables / editor library?
My implementation is Bootstrap4

Any help or comments appreciated
Mike

Hi,
is it possible to use the uploadmany type without having a n_m table - but just with a field
that contains the ids of the images - separated by a separator.

I am thinking about a comparable way as to define a multi selection using "select2" (or "selectize").
i.e.

Image table as in your examples
i.e. "usertable" with fields: firstname - name - age - images
The field "usertable.images" being a varchar - containing the references to the image-ids - e.g. "1;3;5"
for the images with the ids 1,3,5.

Is this possible?
Thank you very much!

Hi, I love the DataTables solution you folks have provided. Thank You!

I have a simple question. I would like to switch the column sort icons in https://datatables.net/examples/styling/bootstrap.html to be like the ones in https://datatables.net/examples/basic_init/zero_configuration.html except I would like them in black rather than purple. I have searched, yet cannot seem to figure it out. Can someone please assist me in this?

Thank you in advance, Timothy

Hi
We are trying to implement a dataset lock if another user is already editing the same datatset.

Because every user is logged in, we know the id of the user. This id should be written to the dataset on opening the editor and reset after submitting or closing the editor.

On submit this works perfectly. But on closing we have the issue, that if another row in the table is selected, another dataset is updated with the user lock.

Here is our edit button code:

{
    text: '<i class="fas fa-pen"></i>',
    action: function ( ) {

        var refID = adressenTable.rows( { selected: true } ).data()[0].viw_adressen.RefID;
        var KontakteID = adressenTable.rows( { selected: true } ).data()[0].viw_adressen.KontakteID;

        var adressenTableSelectedRows = adressenTable.rows( { selected: true } );
        var adressenTableSelectedRow = adressenTable.row( { selected: true } ).index();
        adressenTable.ajax.reload(function(e){

            // Fehlermeldung ausgeben wenn der Datensatz bereits bearbeitet wird
            if (adressenTableSelectedRows.data()[0].viw_adressen.useredit > 0){
                swal({
                    title: "Warnung",
                    text: "Dieser Datensatz wird bereits bearbeitet.",
                    type: "warning"
                });
            } else if (!$('#row_'+KontakteID).length){
                swal({
                    title: "Warnung",
                    text: "Der Status dieses Datensatzes ist in Bearbeitung. Bitte neu selektieren.",
                    type: "warning"
                });
            } else {

                editorFirma.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', 22 )
                    .submit(function(){

                    // Informationsbox mit Memo anzeigen falls Memo vorhanden
                    if (adressenTableSelectedRows.data()[0].viw_adressen.KontakteAlarmText){
                        swal({
                            title: "Information",
                            text: adressenTableSelectedRows.data()[0].viw_adressen.KontakteAlarmText,
                            type: "info"
                        });
                    }


                    // Firma bearbeiten
                    if (KontakteID == refID) {
                        editorFirma.edit('#row_'+refID).buttons( {
                            text: 'Speichern',
                            action: function () {
                                // Datensatz freigeben
                                this.set( 'viw_adressen.useredit', "" );
                                this.submit();
                            }
                        } );
                    } else {
                        // Firmenkontakt bearbeiten
                        editorKontakt.edit('#row_'+KontakteID).buttons( {
                            text: 'Speichern',
                            action: function () {
                                // Datensatz freigeben
                                this.set( 'viw_adressen.useredit', "" );
                                this.submit();
                            }
                        } );
                    }

                }); 

            }   

            // Beim schliessen den User wieder aus dem Datensatz austragen
            editorFirma.on( 'close', function ( e, json/*, data */) {
                editorFirma.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', "" )
                    .submit();

            } );
            editorKontakt.on( 'close', function ( e, json/*, data */) {
                editorKontakt.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', "" )
                    .submit();

            } );
        }, false);

    },
    titleAttr: 'Bearbeiten',
    enabled: false,
    className:  'space'
},

We also tried to disable pointer-events while processing, but it seems, that pointer-events is enabled in between closing and updating:

$('table')
    .on( 'processing.dt', function ( e, settings, processing ) {
        $('table').css( 'pointer-events', processing ? 'none' : 'auto' );
    } )
    .dataTable();

Thank you very much in advance!

because i cant make left join to table with composite keys, how can i bring extra data for each row from this table and send it in the editor response?