Cannot set properties of undefined (setting 'bootstrap')

import $ from 'jquery';
import DataTable from 'datatables.net-bs4';
import Editor from 'datatables.net-editor-dt';
import 'datatables.net-autofill-bs4';
import 'datatables.net-buttons-bs4';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-colreorder-bs4';
....

I saw there was a way to fix it with the ""overrides": {
"datatables.net-bs4": {
"datatables.net": "2.0.0"
}
}

But this does not work for me.

This is what I am currently doing:

d.addEventListener('change', e=> {
if(e.target.getAttribute('type') == 'search'){
if($tbody.children.length > 0){
let netoSumar = 0
let saldoSumar = 0
for(i=0; i< $tbody.children.length; i++){
let valorSaldo = $tbody.children[i].children[8].textContent
}
}else{
console.log($tbody.children)
}
}
})

My Javascript:

function show(response,entity) {
  let i=0;
  console.log("first"+i);
  var myColumnsCosmo = [];

    $.each( response[i].Cosmo[0], function( key, value ) {
            var my_item = {};
            my_item.data = key;
            my_item.title = key;
            myColumnsCosmo.push(my_item);
    });

  var table = $('#dtCosmo').DataTable({
     data:response[i].Cosmo,
      "columns": myColumnsCosmo,
      stateSave: true,
    "bDestroy": true,
    "scrollX": true
   });
}

My HTML:

  <div class="tab-pane fade in active" id="programCosmo">
           <table id="dtCosmo" class="table table-bordered center" cellspacing="0" width="100%">

            </table>
        </div>

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

https://newsinteractive.post-gazette.com/fish-fry-pittsburgh/

How do I remove the quotation marks please?

$('#results').DataTable({
"processing": true,
searching: true,
"ajax": {
"url": "./php/get_data.php",
"type": "POST",
"dataSrc": ""
},
columns: [
{ title: "Venue", data: "venue" },
{ title: "Address", data: "address" },
{ title: "Neighborhood", data: "neighborhood" },
{ title: "Phone", data: "phone"},
{ title: "Times", data: "times" },
{ title: "Menu", data: "menu" },
{ title: "Notes", data: "notes" }
]
});

var table = $('#myTable').DataTable();
table.select.style( 'os' );
table.select.items( 'cell' );

However, I get an error: " Cannot read properties of undefined (reading 'style')".

I can't understand why the select property is undefined.

Do you have any idea?

Thanks,

Link to test case:
Debugger code (debug.datatables.net):

Error messages shown:
Description of problem:

Footer totals are NOT recalculated after destroying table and recreating?

"footerCallback": function (row, data, start, end, display) {
var api = this.api(),
intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[, Rs]|(.\d{2})/g, "") * 1 :
typeof i === 'number' ?
i : 0;
}
total = Intl.NumberFormat('id-ID').format((api
.column(2, { filter: 'applied' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0)).toFixed(2))
$(api.column(2).footer()).html(
total
);
}

<script>
       $(document).ready( function () {
       var table = $('#myTable').dataTable( {  
       "order":[[1,"desc"],[2,"desc"],[3,"desc"],[4,"desc"],[5,"desc"]],
       "dom": '<lif<t>p>',                                                 
       lengthMenu: [[100,10,25,50,-1],[100,10,25,50,"All"]],               
       fixedHeader: {headerOffset: 80},
                           
       columnDefs: [                                                       
                   { targets: [1,2,3,7,8], className: 'dt-body-center'},
                   { targets: [4,5,6,9], className: 'dt-body-right'},
                   { targets: [1], render: DataTable.render.number( ',', '.' )},
                   { targets: [7], render: DataTable.render.number( ',', '.', 0, '$' )}
                   ]
                        
                }); 
           } );
  </script>

And I don't know how to include the following code inside this...

var table = $('#example').DataTable();
 
var filteredData = table
    .column( 0 )
    .data()
    .filter( function ( value, index ) {
        return value > 20 ? true : false;
    } );

also I tried adding the following to disallow ordering and this would not work.

{ targets: [ 0, 1, 2, 3, 4, 5 ], orderable: false },

Any assistance would be appreciated.

Milton.

I am trying this example: https://datatables.net/examples/server_side/simple.html

It's not worked for my script https://jsfiddle.net/inajaf/g8zuL705

Thank you.

{
    "data": [
        {
            "seen": false,
            "id": "ce3ee69f-4929-4d56-9029-df100f7f8975-xxxxx",
            "message": "[xxx] OSSWIN_PagingFilePrc_M1",
            "status": "open",
            "acknowledged": false,
            "dd": false,
            "tags": [
                "env:PROD",
                "hostname:xxx.xxx.xxx",
                "servicename:SE00098"
            ],
            "count": 2
        },
        {
            "seen": false,
            "id": "ce3ee69f-4929-4d56-9029-xxxxx-1638954580271",
            "message": "[xxx] OSSWIN_PagingFilePrc_M2",
            "status": "open",
            "acknowledged": false,
            "dd": false,
            "tags": [
                "hostname:xxx.xxx.xxx",
                "supportgroup:SUPP.WINDOWS"
            ],
            "count": 2
        }
    ]
}

script:

var table = $('#myTable2').DataTable( {
        "processing": true,
        "serverSide": true,
                "ajax": "./parse_all_local.php",
            "columns": [
                { "data": "id" },
                { "data": "status" },
                { "data": "source" },
                { "data": "message" },
                { "data": "acknowledged" },
                { "data": "createdAt" },
                { "data": "lastOccurredAt" },
                { "data": "priority" },
                { "data": "tags.1" }
            ]
etc

using "tags.1", i always receive the first element.
But i need to put (if existing) the hostname in a column, so the supportgroup etc in another column.
For some events, they don't exist, so the column should be empty.
Also the position in the array is not always the same.
As the tags are not key=value, i probably have to split the string, loop through every item, then fill the column?

Is this possible somehow?
Thanks

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

I want to put the code on the onchange of the first Facilities select dropdown.

//facility select right below TBR if not function first section
$('#facilitySelect').on('change', function() {
table.column($(this).data('column'))
.search($(this).val())
.draw();
});

How do I do this?

Guys, how to call empty fields with data parameters? I got an error for the empty parameter. I need to call some fields as empty on my view page

Error:

 var url = 'Not set';

    var emp = $('#countable')
        .on('init.dt', function () {

            let language = document.documentElement.lang;

            if (language === 'az') {
                url = '/plugins/datatables/i18n/az_AZ.json'
            } else if (language === 'ru') {
                url = '/plugins/datatables/i18n/ru_RU.json'
            }
        })

        .DataTable({
            language: {
                url: url,
                paginate: {
                    next: '»',
                    previous: '«'
                },
            },

$("#datatables").DataTable({
    "bFilter": true,
    "serverSide": true,
    "deferRender":true,
    "processing": true,
    "fixedHeader": true,
    "scrollX": true,
    "columns": [
        { "data": "Name", "title": "Name", "autoWidth": true },
        { "data": "Email", "title":"Email", "autoWidth": true },

    ],
    "ajax": {
        "url" : "/page.php",
        "type" : 'post',
        "data": function (d) {
            return $.extend({}, d, {
                "sdate": $('#sdate').val(),
                "edate": $('#edate').val()
            });
        }
    },
    "language": {
            "processing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span> ',
            "emptyTable": "No Data available"
    },
    "scroller": {
      loadingIndicator: true
    },
    "initComplete" : function () {
        $('.dataTables_scrollBody thead tr').addClass('hidden');
    }
});

<table id='tblIndividualTransaction'>
            <thead>
                <tr>
                    <td rowspan="2"><input id='checkAll' type="checkbox"/></td>
                    <td rowspan="2">CIF No</td>
                    <td rowspan="2">Customer Name</td>
                    <td rowspan="2">Kegiatan Usaha</td>
                    <td rowspan="2">Latest Assets</td>
                    <td rowspan="2">Source Of Fund</td>
                    <td rowspan="2">Portofolio (IDR)</td>
                    <td colspan="4">Transaction Frequency</td>
                    <td colspan="3">Transaction Amount (IDR)</td>
                    <td rowspan="2">Transaction Analysis</td>
                    <td rowspan="2">DECISION</td>
                </tr>
                <tr>
                    <td>Buy</td>
                    <td>Sell</td>
                    <td>Total</td>
                    <td>Form</td>
                    <td>AVG Buy</td>
                    <td>AVG Sell</td>
                    <td>Total AVG</td>
                </tr>
            </thead>
        </table>

and initialize it at js

var dataTable = $("#tblIndividualTransaction").dataTable({
"bJQueryUI": true,
"bLengthChange": true,
"bDestroy":true,
"sPaginationType": "full_numbers",
"bSort": false,
"bScrollCollapse": true
});

but it it shown error :

Uncaught TypeError: Cannot set property '0' of undefined - jquery.dataTables-1.8.1.min.js:117

i was following this doc ,
https://datatables.net/examples/basic_init/complex_header.html

So what did i do wrong ??

Thank you,

First of all i appreciate and admire the work by the team for this support and providing the useable datatable.
Thmbs up!

I am using datatable api, All the functions I want to use are working properly except one issue.

While connecting my link in a row of the datatable to modal class, only first rows are responding for the modal and displaying it properly, rest of the rows from 11 to end whatever the number is not showing modal.

My code for the function of scrolling and search is as follows.

$(document).ready(function() {
var table = $('#example').DataTable({

    scrollX: true,

    "scrollY": "350px",
    "scrollCollapse": true,
    "paging": true,




    initComplete: function() {
        $('div.dataTables_scrollHeadInner thead tr#filterboxrow th').each(function() {
            $(this).html('<input id="input' + $(this).index() +
                    '" type="text" class="form-control" placeholder="filter by ' + $(
                        this).text() + '" />')
                .css('padding-left', '4px');
            $(this).on('keyup change', function() {
                var val;

                if ($(this).index() === 0) {
                    val = $('.DTFC_Cloned #input' + $(this).index()).val();
                } else {
                    val = $('#input' + $(this).index()).val();
                }

                table.column($(this).index()).search(val).draw();
            });
        });
    }
});

});

Function for modal I am using following:

$(document).ready(function() {
$('.updatestaffmodalbtn').on('click', function() {

        $('#updatestaffmodal').modal('show');

        $tr = $(this).closest('tr');
        var data = $tr.children("td").map(function() {

            return $(this).text();
        }).get();

        console.log(data);

        $('#iimsid').val(data[1]);
        $('#IMS1clientname').val(data[2]);
        $('#IMS4staffname').val(data[3]);
    });
});

Once again thank you for the forum to solve our issues and help us.
Regards

$('form table input[name="check_all"]').on('change', function() { $(this).closest('table').find('input[type="checkbox"]:not(:disabled)').prop('checked', $(this).prop('checked')); });

This code help me to select all checkbox on the current page only. What i want is to select all checkboxes.

I found the code below on the forum but its shows an error that dt.rows() is not a function maybe due to version difference ?
dt.rows().nodes().to$().find

Thanks in advance for your help,

now I wanna put number of rows based on above 3 conditions... in a tr. it should also work with search.

I am using DataTable 1.8. In the table are input fields which are filled via Ajax. Filling the fields works very well.
I want the user to add a new row. This does not work, the data is not displayed.

$('#addRow').on('click', function () {
    var t = $('#test').DataTable();
    var obj ='{"data":[{"DT_RowId":"1","pos":"2","price":"10.00"}]}'
    t.row.add(obj).draw();
});

How can I insert data into input fields? A new row is inserted with the content "undefined".
thanks

I am trying to use datatables with pug but * i keep getting an error

Uncaught ReferenceError: $ is not defined

I am using datatables locally and my code looks like this:

extends layout/base

block content

    #heading
      h1.text-center IL Clients

    #content
    //- Do it like this...You're already in JavaScript land after the -
    - var items = rows

      script.
        $(document).ready(function() {
          $('#resultTable').DataTable({
            "order": [[ 0, "desc" ]]
            });
        });
      
      div
        div

          table#resultTable.table.thead-light 
            thead 
              tr: th Clien Number
                  th Gender 
                  th Marital Status
                  th Phone Number 
                  th Group  
            tbody 
              each item in items

                tr 
                  td=item.clinic_number
                  td=item.gender
                  td=item.marital
                  td=item.phone_no
                  td=item.group_id
               

I have also tried moving the js script part below but nothing works. Any advise/recommendations will be appreciated.

We do have some conversion taking place, so when the we add/update a row using d/M/yyyy format, it will convert it and store it as a regular datetime in the SQL Server.

Here's what we have in the C# code regarding this particular column:

.Field(new Field($"{certificationsDBSetName}.InvoicingDate")
                            .SetFormatter(Extensions.ParseStringToDateTime("d/M/yyyy", true))
                            .GetFormatter(Extensions.ParseDateTimeToString("d/M/yyyy"))
                    )

With the following functions:

public static Func<object, Dictionary<string, object>, object> ParseStringToDateTime(string format, bool onlyDate = false)
        {
            return (val, data) =>
            {
                if (string.IsNullOrWhiteSpace(val.ToString()))
                    return null;

                DateTime dateTime;
                DateTime.TryParseExact(val.ToString(), format, CultureInfo.InvariantCulture, DateTimeStyles.None, out dateTime);
                //DateTime.ParseExact(val.ToString(), format, CultureInfo.InvariantCulture);

                if (onlyDate)
                    return dateTime.Date;

                return dateTime;
            };
        }

        public static Func<object, Dictionary<string, object>, object> ParseDateTimeToString(string format)
        {
            return (val, data) => val != null ? ((DateTime)val).ToString(format, CultureInfo.InvariantCulture) : val;
        }

Is there a way to make the search work (at this point we only need exact date search, not range)

Thanks for any help!

Getting "Cannot update identity column" error when I'm not trying to update an identity column how to fix it ?