Hi,
I’ve been going down the road of parent/child table to achieve a result, but thinking maybe its the wrong route.
My goal is to allow users to define 3-4 options which become available as a select/drop down field on the main table. I am working entirely front end and JavaScript based. Is maybe some type of custom button that appends the choice options to the field is maybe better?
Any thoughts or examples?
Thanks!

The image shows the table loading without any errors and with my refresh every 30 secs it also reloads.

The following is the returned data from the AJAX call and is data typed in manually to prove it works.

{"data":[{"DT_RowId":"row_1","ItemId":"ItemId","Descr":"Descr","Qty":1,"Unit":"EACH","Packed":0,"Held":0,"progress":"","detail":""}],"options":[],"files":[],"searchPanes":{"options":[]}}

Now if I generate the data using my database lookup it returns the following data.

{"data":[{"DT_RowId":"row_1002087","ItemId":"HZJ75-8L-F","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002088","ItemId":"HZJ75-8+2-R","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002090","ItemId":"GS59-221","Descr":"GAS SHOCK ABSORBER","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002091","ItemId":"PG00-2200","Descr":"4X4 SUSPENSION CATALOGUE","Qty":"20.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002092","ItemId":"PB15-1060K","Descr":"POLYURETHANE BUSH KIT","Qty":"2.0000","Unit":"KIT","Packed":"0.00","Held":"0.00","progress":"","detail":"SPF315<br \/>SPF317<br \/>SPF316<br \/><\/div><\/div>"}],"options":[],"files":[],"searchPanes":{"options":[]}}

It then does not load in the table. Just says 'Loading...'

Now the funny thing is, if I add back in AFTER the database script runs the manually added record from my first test, the table loads again without and errors. However, it still only shows me as per the image (1 record - manually added one)

The following is the data it returns.

{"data":[{"DT_RowId":"row_1002087","ItemId":"HZJ75-8L-F","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002088","ItemId":"HZJ75-8+2-R","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002090","ItemId":"GS59-221","Descr":"GAS SHOCK ABSORBER","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002091","ItemId":"PG00-2200","Descr":"4X4 SUSPENSION CATALOGUE","Qty":"20.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002092","ItemId":"PB15-1060K","Descr":"POLYURETHANE BUSH KIT","Qty":"2.0000","Unit":"KIT","Packed":"0.00","Held":"0.00","progress":"","detail":"SPF315<br \/>SPF317<br \/>SPF316<br \/><\/div><\/div>"},{"DT_RowId":"row_1","ItemId":"ItemId","Descr":"Descr","Qty":1,"Unit":"EACH","Packed":0,"Held":0,"progress":"","detail":""}],"options":[],"files":[],"searchPanes":{"options":[]}}

I have many tables in the system working but this one just seems to be making a joke out of me.

Now the script I have, if I leave it all as it is and just remove the part where it adds the data to the array (php) it runs through fine. The "Loading..." issue only appears when I add to the array through the script. I have replaced that portion also with the manually added part and it still doesn't work.

Any help would be appreciated.

Hello,

I realize the FAQ has the section "My events don't work on the second page" at https://datatables.net/faqs/#events, but I do not have enough expertise with js to be able to work out the entire solution. I have a dropdown menu (like others have posted about before) but do not know enough to be able to repopulate it when I sort or go to a new page of my datatable. I can detect a click on the table (line 22), like for when a column sort or a new page is selected, but I am stuck on how to get js to reload those dropdown menu items on the next page or after a sort.

Any pointers would be greatly appreciated. Sorry in advance for the very basic question since I know this comes easy to most people here.

Here is the simplified version of my page-

<script src="/www/static/js/datatables.min.js"></script>

<script>
jQuery(document).ready(function() {
    $('#myTable').DataTable( {
        dataSrc: 'myTable',
        columns: [
            { data: 'State' },
            { data: 'Town' },
            { data: 'Manage' }
        ],
        order: [[0, 'asc']],
        columnDefs: [
            { targets: [2], orderable: false },
            { width: "15%", targets: [2] },
        ],
        stateSave: true,
        stateDuration: 0
    
    });

    $('#myTable').on('click', '', function() {

    });
    
});
</script>


<table id="myTable" class="display">
    <thead>
        <tr>
            <th>State</th>
            <th>Town</th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td> 
                <ul class="nav">
                    <li class="dropdown">
                        <a href="javascript:void(0);return false;">Manage</a>
                        <ul class="dropdown-menu">
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Hi, Im using databale in my project and it works well, but i cant use export buttons becouse they dosent show data- API call get correct response, but dosent show>>

    ngOnInit(): void {
        this.setDefaultDateTimeParams();
        var oldExportAction = function (self, e, dt, button, config) {
            if (button[0].className.indexOf('buttons-excel') >= 0) {
                if (($.fn.dataTable.ext as any).buttons.excelHtml5.available(dt, config)) {
                    ($.fn.dataTable.ext as any).buttons.excelHtml5.action.call(self, e, dt, button, config);
                } else {
                    ($.fn.dataTable.ext as any).buttons.excelFlash.action.call(self, e, dt, button, config);
                }
            } else if (button[0].className.indexOf('buttons-print') >= 0) {
                ($.fn.dataTable.ext as any).buttons.print.action(e, dt, button, config);
            }
        };

        var newExportAction = function (e, dt, button, config) {
            var self = this;
            var oldStart = dt.settings()[0]._iDisplayStart;

            dt.one('preXhr', function (e, s, data) {
                // Just this once, load all data from the server...
                data.start = 0;
                data.limit = -1;

                dt.one('preDraw', function (e, settings) {
                    // Call the original action function 
                    oldExportAction(self, e, dt, button, config);

                    dt.one('preXhr', function (e, s, data) {
                        // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                        // Set the property to what it was before exporting.
                        settings._iDisplayStart = oldStart;
                        data.start = oldStart;
                    });

                    // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
                    setTimeout(dt.ajax.reload, 0);

                    // Prevent rendering of the full data to the DOM
                    return false;
                });
            })

            // Requery the server with the new one-time export settings
            dt.ajax.reload();
        };


        const that = this;
        this.dtOptions = {
            bFilter: false,
            info: false,
            pagingType: 'full_numbers',
            pageLength: 10,
            serverSide: true,
            processing: true,
            ajax: (dataTablesParameters: any, callback) => {

                this.filter.page = (dataTablesParameters.start / dataTablesParameters.length);
                this.filter.pageSize = dataTablesParameters.length
                this.filter.fromDate = moment(this.fromDate).format('x');
                this.filter.toDate = moment(this.toDate).format('x');

                this.customerService.getResults(dataTablesParameters, this.filter).subscribe(pagedData => {
                    this.page.recordsFiltered = pagedData.content.recordsFiltered;
                    this.reportList = pagedData.content.data;

                    callback({
                        recordsTotal: pagedData.content.recordsTotal,
                        recordsFiltered: pagedData.content.recordsFiltered,
                        data: []
                    });
                });

            },
            columnDefs: [{ // set default column settings
                'orderable': false,
                'targets': [0, 1, 2, 3]
            }],
            columns: [{ data: 'firstName' }, { data: 'lastName' }, { data: 'creation' }, { data: 'mobileNo' }],
            language: this.datatabaleLang,
            dom: 'Bfrtip',
            buttons: [{
                extend: 'excelHtml5',
                title: ' گزارش مشتریان',
                text: 'خروجی excel',
                action: newExportAction,
                exportOptions: {
                    columns: [0, 1, 2, 3]
                },
            },
            {
                extend: 'print',
                title: ' گزارش مشتریان',
                text: 'پرینت لیست',
                action: newExportAction,
                exportOptions: {
                    columns: [0, 1, 2, 3]
                },
                customize: function (win) {
                    $(win.document.body)
                        .css('font-size', '10pt')
                        .css('text-align', 'center')
                        .css('padding-right', '10%')
                        .css('background-color', '#c2c2c2')
                        .prepend(
                            '<span>همراه کارت</span>'
                        );

                    $(win.document.body).find('table')
                        .addClass('print-preview')
                }
            }
            ]
        };
    }

even I tried simple mode of buttons, but it didnt work ...

 buttons: [
                {
                  extend: 'collection',
                  text: 'Export',
                  buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                  ]
                }
              ],

can anyone help me, please?

Hi Guys, I'm wondering how to fix the overlapping issue in my work right now.

In my ajax i have a scroller, so I'm using this command :

scrollY: "55vh",
scrollX: "100%",
scrollCollapse: true,
paging: true,
scroller: {
loadingIndicator: true
},

However, I have 2 table header and the other 1 is using multiselect bootstrap, If I comment the ajax scroller, select tag is not overlapping but if I uncomment it, datatable ( tbody is overlapping with the select tag) tried to use z-index on css but it didn't resolve it.

css code:

.multiselect-container{
height:48vh;
width:100%;
overflow-y:scroll !important;
z-index: 2 !important;
}

hope someone help me. Thanks!

I would hope this would be an easy question to answer.

Say I have 12 columns, 0 - 7 are visible, 8-11 are hidden.

I have this code

               {

                    extend: 'columnToggle',

                    text: 'Update',

                    columns: [8,9,10,11]

                }

Can I show 8-11 while hiding 4,5,6,7 and toggle between visibility of those 8 columns?

Link to test case:
https://jsfiddle.net/jybleau/ftw4dgx5/

Error and description of the problem:
When using bootstrap 3 CSS, a collection button with dropup = true does not dropup correctly. It still drops down minus 5px instead of up.

I tried to debug in datatables.buttons.js :

The problematic code seems to be at line 1145 var collectionHeight = display.outerHeight();, the display outerHeight is zéro.
By changing the code to var collectionHeight = display.children().outerHeight(); we get the correct dropmenu outerHeight.

Might also have to change the code at line 1061.

PS: the problem could also be that the display object (the collection) shoud have the height of it's children, the dropmenu, already. But I could not find why yet...

NB: I did not test with other Bootstrap versions.
And the dropup is correctly dropping up (!) when using Datatables default CSS as seen here:
https://datatables.net/extensions/buttons/examples/styling/dropup

Thanks

i have a table which i fetch from my database. After fetching, i put it in a html table format and then initialize datatable on it.
So the database and datatable are not linked.

Column salary and user have dropdown filter in header.

Now i have a button in every row of the datatable clicking which toggles the value of bonus in the DATABASE.
So lets say i click on button in row 3, then an ajax call will be made to update the bonus value of this row to 'NO' in DATABASE.
what i want is that if the ajax call is successful then i select row 3 again from database and update row 3 in the datatable.
How do i do this in ajax call? How do i know which row to update?
My data has more than 10000 entries. i dont want that if any filter has been applied using header filters, they get reset. Also i dont want the datatable gets reset to page 1 upon update. If after update that particular row adheres to the header filter then it will be shown or it will be filtered out.

I know about the pipelining, but this does not seem to work well with scroller (I don't want pages itself)

I also know you're going to say: for n rows you don't need scroller.
To that I say: yes the browser can handle it, that does not mean the server can load them as fast from the database nor does it fix the extra delay you have because the response is heavier.

I just want everything to be snappy and this would solve 2 problems for me:
- faster scrolling when going back
- no shifting while scrolling when some rows have a different count in lines
- maybe less problems selecting multiple rows over extra draws

Thanks

Не менее значимый эффект анаболиков, проявляющийся на курсе - это увеличение объемов мышечной массы. Для начала мы хотим обратить ваше внимание на противопоказания. Поэтому важно не просто купить стероиды, но и грамотно их применять. Некоторые из препаратов сделаны фармацевтическими компаниями, но многие из них производятся в подземных лабораториях непрофессиональными фармацевтами.
Идеальным выходом, наверное, стало бы употребление стероидов в малых дозах и под контролем врачей. Более продолжительные сроки будут давать лучшие результаты, но также повысят риск возможных побочных эффектов.
1. Синтол. Этот агрессивный анаболик нельзя употреблять новичкам. 5. С пролактином или прогестероном при таком курсе, у Мезоморфов обычно проблем не существует, но - если что - Каберголин по пол таблетке два раза в неделю.
<a href="https://fern-flower.ru/2020/pitanie/vlijanie-pitanija-na-sostojanie-pozvonochnika/">https://fern-flower.ru/2020/pitanie/vlijanie-pitanija-na-sostojanie-pozvonochnika/</a перейдите и получите нужную Вам информацию
Даже не говори о том, что кто-то алкоголем убивает себя, сигаретами.
Это самая верная тактика при создании курсов для себя. В чем проявляется вред стероидов? Отмечается также уменьшающаяся склонность к перетренированности, сопровождающейся повышенным распадом (катаболизмом) мышечных тканей.

Вероятно, это не тот стиль, который мне нравится, тем не менее, он был для моей супруги, которая в то время не увлекалась творчеством, и ей это нравится. Или кто идет и живет с причудливыми людьми по всей реке, и приезжает в резиденцию с женщиной, которая открыла для себя больше подходов к плетению одежды. Если мы хотим эффективно изменить способ, которым мы делаем предприятие как простоватый, мы должны перейти к основанному на активах взгляду на Север. Я надеюсь, что все мы сейчас осуществляем корректировку, так как люди размышляют о ценности наших чрезмерных улиц, значимости основополагающей финансовой системы, позиции промышленности в создании рабочих мест и прогрессе, а также о многих невероятных актах благотворительности, которые мы теперь видел из бизнеса наряду с огромными усилиями СИЗ. Они воспринимают все это как личное. Эти актуальные кортикостероиды до 25 раз являются более мощными, чем актуальные гидрокортизон.

I'm trying to hide a field on this modal?

selectEditor.create({
title: 'Map CSV fields',
buttons: 'Import '+csv.length+' records',
message: 'Select the CSV column you want to use the data from for each field.'
});

How do I do it?

I have only been able to hide a field on but not on selectEditor.create()

editor.on('initCreate', function() {
editor.show(); //Shows all fields
editor.hide('FirstName');
});

THANKS!

Hello,

I have some code that exports row(s) of data to a separate database and after updates those row(s) as being "completed" and it works for the most part. To mark these rows as completed, I get the row IDs of the selected rows and open a hidden edit form on them, update the field to be marked as completed, and then submit it.

One of the fields on the form happens to be a dependent cascading type of field, so when a subdepartment is selected a specific list of categories appears. However, I've noticed that the categories field, which is dependent on the subdepartment field, doesn't always load in time before the form is submitted and as a result the row gets updated with an empty categories field.

I've tried a couple things like a setTimeout() function, but that doesn't necessarily wait until the field is loaded; a setInterval() function, which checks if the field is loaded before submitting, but that doesn't seem to work when the form is hidden and if you're using multiSet(); and, I also tried implementing dependent() on the categories field itself with a function that would submit the form, but it ends up messing with some inline editing functionality.

I was wondering what is the most efficient way to have the form wait to submit until the categories field is successfully loaded?

// Filter available categories on subdepartment selection
editorNP.dependent('ProductUpdates.POS_TAB_F04', '/api/Categories');

// Call to the exportItem() function.
exportItem();

// Gather all selected rows.
var rows = table.rows({ selected: true }).indexes();

// If exporting 1 product, use DataTables set method; else, use DataTables multiSet method.
if (rows.length == 1) {

    // Get selected row's id.
    var row = table.row(rows);

    // Open hidden edit form and update fields.
    editorNP.edit(row, false)
        .set('ProductUpdates.completeddate', getDate())
        .set('ProductUpdates.completedby', currentUser)
        .set('ProductUpdates.productstatusID', 4);

    editorNP.submit();

} else {
    // Open hidden edit form and update fields for multiple products.
    editorNP.edit(rows, false);

    // Loop through each product updating fields.
    $.each(rows, function (i, rowIdx) {
        var row = table.row(rowIdx);

        editorNP.field('ProductUpdates.completeddate').multiSet(row.id(), getDate());
        editorNP.field('ProductUpdates.completedby').multiSet(row.id(), currentUser);
        editorNP.field('ProductUpdates.productstatusID').multiSet(row.id(), 4);
    });

    editorNP.submit();
}

Hello, my DataTable is almost exactly where I need it to be. I was able to finally get the row grouping to work, but now I want to make the parent row be able to collapse/expand but cannot figure out how. I looked at this example from this thread, but could not quite understand it as the data in that example was hard coded in the HTML. Here is my code.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class="header">
  <h1><strong>Deliverables</strong></h1>
</div>
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tfoot>
      <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </tfoot>
</table>
</div>
<style> //These are just CSS styling I chose to use.
div.container {
    min-width: 980px;
    margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
</style>
<script>
function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
    //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = ["url1","url2","url3"];
       
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    } // missing bracket
}
$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program", visible: false },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
    
    dom: 'Bfrtip',
    buttons: [
        'copy','csv','excel','pdf','print'
    ], 
    rowGroup: {
            dataSrc: 'Program'
        }
  } );
    
 loadData();
    
} );
</script>

So I have the rowgroup based off the program attribute, and the rest of the information is under that. Is it possible to have that row collapse/expand all the child rows under it? I will add a picture of what my table looks like

I have a couple different problems with SearchPanes. I'm calling SearchPanes from a bootstrap4 button on the main page. When SearchPanes loads I get panes that are three wide and at least three rows. The "layout: columns-1" seems to have no effect no matter what I set it to.
I'm also having difficulty with the sort, scroll, etc. buttons/icons in the panes. They are tiny but they work. Is there a way to style the search text field at the top of the pane? The pagination buttons do not appear in the panes either and cascadePanes has no effect. I seem to be getting some kind of default SearchPane.

My js and css included files are ...

<link rel="stylesheet" type="text/css" href="css/menu_style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4-hover-navbar.css">
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/Editor-1.9.2/css/editor.quill.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/fontawesome-pro5/css/all.css">
<link rel="stylesheet" type="text/css" href="css/highlight-10.1.2.min.css">
<link rel="stylesheet" type="text/css" href="css/quill.snow.css">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper-1.12.9.min.js"></script>
<script type="text/javascript" src="js/bootstrap-4-hover-navbar2.js"></script>
<script type="text/javascript" src="common/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/searchPanes.bootstrap4.min.js"></script>
<script type="text/javascript" src="common/DataTables/Editor-1.9.2/js/editor.quill.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="common/fontawesome-pro5/js/fontawesome.js"></script>
<script type="text/javascript" src="js/highlight.min.js"></script>
<script type="text/javascript" src="js/quill.min.js"></script>

<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />

and my client side script looks like this...

    var table=$('#cases').DataTable( {
        searchPanes:{
            layout: 'columns-1',
            columns: [1,2],
            cascadePanes: true,
            viewTotal: true,
            dtOpts:{
                dom: 'tp',
                paging: true,
                pagingType: 'numbers',
                searching: false,
            }
          },

        dom: \"<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>i<'col-sm col-md'>l<'col-sm col-md'>f<'col-sm col-md'>p>\" +
    \"<'row'<'col-sm col-md'tr>>\" +
    \"<'row'<'col-sm col-md'i><'col-sm col-md'>p>\",
        ajax: 'cases-con.php',
                 ...etc.

buttons: [
          {
           ...etc.
          { 
            extend: 'searchPanes',
            className: 'btn btn-default btn-sm-menu'
          },
        ],
        columnDefs: [
            { className: 'dt-body-nowrap', targets: [ 3, 4, 5, 6 ] },
            { className: 'dt-head-center',  targets: -1 },
            {
                searchPanes:{
                show: true,
                dtOpts:{
                    dom: 'ti',
                    info: true,
                }
              },
                  targets: [1,2]
              }
        ],
        columns: [
                   ...etc.

Hi all,
I was working on v1.18.18 DT and 4.4.1 bottstrap on a project where there is a table with fixed first column and scrollable rows. I have updated the project to last dt version and bootstrap 4.5.0, and now the header columns result to be not aligned with the data rows.
Here an example with my data:
https://codepen.io/Ices_Eyes/pen/vYLmBod

On real page the alignment is also weaker than on the test page... Any idea on what should be the problem? Thanks

Hello, it's a bit complicated to explain, but I'll try to be clear. I have a Datatables with the server side option to activate:
$('#TousLesEnsembles').DataTable({
"processing": true,
"serverSide": true,
"info": true,
"pageLength": 13,
"stateSave": false,
"lengthMenu": [[10, 20, 30], [10, 20, 30]],
"ajax": {
"url": "/EnsemblePneus/TousLesEnsemblesDisponiblesAjaxDatatables",
"type": "GET"
},
"columns": [
{
"data": "active", "orderable": false,
"render": function (data) {
return (data === true) ? '

' : '

';
}
},
{ "data": "numero", "orderable": true },
{ "data": "concessionnaire", "orderable": false },
{ "data": "nomClient", "orderable": false },
{ "data": "telephone", "orderable": false },
{ "data": "noSerie", "orderable": false },
{ "data": "emplacement", "orderable": false },
{
"data": "enInventaire", "orderable": false,
"render": function (data) {
return (data === true) ? '

' : '

';},
},
{
"data": "transactionId", "orderable": false, "render": function (data) {
return '<a href="/Transactions/Edit/' + data + '/"><i class="fas fa-edit" title="Modifier"></i></a>';
},
}
],
});

and here is my cshtml:

@model IEnumerable<DPGEstrieBibliothequeClasses.Modeles.EnsemblesPneusDataTables.DataItem>

@{
    ViewData["Title"] = "Ensembles";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Ensembles</h1>
<div class="DatatablesContent">
    <table id="TousLesEnsembles" class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().Active)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().Numero)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().Concessionnaire)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().NomClient)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().Telephone)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().NoSerie)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().Emplacement)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().EnInventaire)
                </th>
                <th>@Html.DisplayNameFor(model => model.FirstOrDefault().TransactionId)</th>
            </tr>
        </thead>
    </table>
</div>

I receive this error:
DataTables warning: table id=TousLesEnsembles - Ajax error. For more information about this error, please see http://datatables.net/tn/7

But, I understand the meaning of this error. but again, I received only this error on my production environment. Everything is working perfectly in my development environment.

On my production environment, I comment out any line, everything works perfectly. So all kind of the "data" is ok. It is as if there is a problem with the number of thead and tbody columns. My C # function also works # 1 as tested on my dev environment. I don't have tons of projects done, but I'm managing, but here I am at a dead end. Does anyone have a possible solution?
Thank you very much!

Below is HTML that can be used to replicate my issue. I'm migrating from bootstrap 3.4.1 to 4.1.3 and doing checks to verify all aspects of design work in the same way. I'm experiencing an issue with a table that does not occur under bootstrap 3.4.1 and so I am seeking code advice.

When using bootstrap 3.4.1 if I use <table id="example" class="display table table-striped table-hover table-responsive"> my table is displayed exactly as I want. It has the datatables features and it is responsive. Throughout, by responsive I mean that it has the slider below the table. However, this same exact code when using bootstrap 4+ does not yield a responsive table unless I add in style="width:100%".

Here is a summary of what I observe under Bootstrap 4+

1) When using <table border="1" class="table table-striped table-hover table-responsive" id="example" style="width:100%"> the table displays in the browser exactly as I would want.
2) When using <table border="1" class="table table-striped table-hover table-responsive" id="example"> the table has the datatables features I want from my .js code but the table is no longer responsive
3) When using <table border="1" class="table table-striped table-hover table-responsive" id="foo"> the table is responsive but does not have the datatables features I want.

It seems to be a conflict also with the .js code I am using to render the table for the datatables package. That code is:

    <script>$(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            });
        });

        var table = $('#example').DataTable({
            orderCellsTop: true,
            fixedHeader: true
        });
    });
     </script>

My question is whether I have missed anything in my migration to bootstrap 4+ from required datatables js or css or if there is a bug in my js code above to render the table that is causing the issue? I'm using Pandas/python to generate the HTML tables and I cannot use the functions in Pandas to pass a style:width argument so I'd like to use the code <table id="example" class="display table table-striped table-hover table-responsive"> as I use now with bootstrap 3.4.1.

Below is HTML for to reproduce my issue

 <!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <!-- Bootstrap core CSS -->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <!--<link href="static/bootstrap.min.css" rel="stylesheet">-->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
            
        <!-- these two scripts below are specifically to support plotly output -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

    </head>
    <body>

        <br> 
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-9" style="background-color:lightskyblue;">
                    Test
                </div>
                <div class="col-sm-3" style="background-color:white;">
        <table border="1" class="table table-striped table-hover table-responsive" id="example" 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>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
                </div>
            </div>
        </div>
        <!-- End paneling -->

        <!-- styling for tables -->
        <script type='text/javascript'>
          window.onload = function() {
            const thead = document.querySelectorAll('.table > thead');
            thead.forEach(e => e.classList.add('thead-dark'));
          }
        </script>

    </body>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script type ="text/javascript" src = "static/toggleFrequency.js"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

    <!--These next two lines are experimental for now. They do the reorder -->
    <!-- Also, see reorder argument in colulmsearcher.js -->
    <link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>


    <!-- For column visibility -->
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>

    <!-- script to create searchable column headers -->
    <!--<script type = "text/javascript" src = "/static/columnSearcher.js"> </script>-->
    <script>$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        });
    });

    var table = $('#example').DataTable({
        orderCellsTop: true,
        fixedHeader: true
    });
});
 </script>

    <!-- for exporting data to csv file -->
   <script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"> </script>
   <link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet">
    <script type="text/javascript" src = "/static/form_items_table.js"> </script>

    <!-- These below are needed for the live search box to work -->
    <!-- Latest compiled and minified CSS -->

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
</html>

Hi,
I am doing a setup like found here:
https://editor.datatables.net/examples/advanced/localstorage.html

The one problem/question I am trying to figure out how to solve is the data pretty much lives in local storage permanently for the short term. Clearing cache doesn't wipe it, or anything. I was thinking of some sort of button to delete current local storage but not sure how to go about it.
Thoughts?

In my MVC project I have a field which in the controller, has a LeftJoin to another table. during an .on(change) of the field, is there a way to 'requery' the leftjoin?

    CaseActionsEditor.field('CaseActions.ActionStatusID').input().on('change', function (e, d) {
        //console.log("D: " + JSON.stringify(d));
        //console.log("E: " + JSON.stringify(e));
        if (d === undefined) { // The change was triggered by the end user on update rather than an auto set
            var actionID = CaseActionsEditor.get("CaseActions.ActionID");
            var isComplete = CaseActionsEditor.get("ActionStatus.IsComplete");
            if (actionID == 1) { //Out for Delivery
                var actionStatusID = CaseActionsEditor.get("CaseActions.ActionStatusID");
                $.ajax({
                    url: 'api/ActionStatus?actionID=0&actionStatusID=' + actionStatusID,
                    dataType: 'json',
                    success: function (response) {
                        isComplete = response.data[0]["ActionStatus"]["IsComplete"];
                        if (isComplete == 1) {
                            CaseActionsEditor
                                .show("DefaultDate")
                                .field('DefaultDate').input().addClass('redInputbox');
                        } else {
                            CaseActionsEditor.hide('DefaultDate');
                        }
                    }
                });
            }

        }
    });

On Line 6, the value is still what it was when the editor was opened. if i was able to requery the value in the left join I would not need to do the following ajax call

                    .LeftJoin("ActionStatus", "ActionStatus.ActionStatusID", "=", "CaseActions.ActionStatusID")
                        .Field(new Field("ActionStatus.StatusName").Set(false))
                        .Field(new Field("ActionStatus.IsComplete").Set(false))

Or, on the select options, is there a way to include the IsComplete value that I can reference later?

                    .Field(new Field("CaseActions.ActionStatusID")
                        .Validator(Validation.NotEmpty())
                        .Options(new Options()
                                    .Table("ActionStatus")
                                    .Value("ActionStatusID")
                                    .Label("StatusName")
                        )
                    )

Hi, I have developed some javascript code that rotates header items to allow more compact columns (please see the image). This code works great, and I would like to release it back to the community, but I need help turning it into a plugin. Is there anyone out there who would like to partner with me on this?

thanks,
michael