jquery.dataTables.min.js:60 Uncaught TypeError: Cannot read property 'style' of undefined

jquery.dataTables.min.js:60 Uncaught TypeError: Cannot read property 'style' of undefined

nanjarnanjar Posts: 2Questions: 2Answers: 0

my table head :
<thead>

  <tr>
    <th width="2%" rowspan="2" bgcolor="#EBEBEB"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox" />
      <label for="checkbox"></label></th>
    <th width="10%" rowspan="2" bgcolor="#EBEBEB">Batch # </th>
    <th width="21%" rowspan="2" bgcolor="#EBEBEB">Customer Name </th>
    <th colspan="4" bgcolor="#EBEBEB"><div align="center">INVOICE</div></th>
    <th colspan="2" bgcolor="#EBEBEB"><div align="center">Faktur Pajak # </div></th>
    <th width="15%" rowspan="2" bgcolor="#EBEBEB"><div align="center">ISS # </div></th>
    <th colspan="3" bgcolor="#EBEBEB"><div align="center">Invoice Submission </div></th>
  </tr>

  <tr>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Number</div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Date</div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Curr</div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Amount</div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">VAT # </div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Amount 10% </div></th>

    <th width="7%" bgcolor="#EBEBEB"><div align="center">Submit Date </div></th>
    <th width="7%" bgcolor="#EBEBEB"><div align="center">Submitted by </div></th>
    <th width="8%" bgcolor="#EBEBEB"><div align="center">Received by </div></th>
  </tr>

</thead>

and JS:
editor = new $.fn.dataTable.Editor( {

        ajax: "batch_master_display.php", 
        table: "#display",
        fields: [ {
                label: "Batch #",
                name: "batch_no"
            }, {
                label: "Customer Name:",
                name: "customer_name"
            }, {
                label: "Number:",
                name: "invoice_no"
            }, {
                label: "Date:",
                name: "invoice_date",
                type: "datetime"
            }, {
                label: "Curr:",
                name: "invoice_curr"
            }, {
                label: "Amount:",
                name: "invoice_amount",

            }, {
                label: "VAT #",
                name: "faktur_vat"
            }, {
                label: "Amount 10%",
                name: "faktur_amount"
            }, {
                label: "ISS",
                name: "iss_no"
            }, {
                label: "Submit Date",
                name: "submit_date"
            }, {
                label: "Submit by",
                name: "submit_by"
            }, {
                label: "Received by",
                name: "receive_by"
            }



        ]
    } );

    var table = $('#display').DataTable( {
        fixedColumns: {
            leftColumns: 2
        },
        scrollX: true,
        dom: "Bfrtip",

        ajax: "batch_master_display.php", 

        columns: [
            {   // Checkbox select column
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "batch_no" },
            { data: "customer_name" },
            { data: "invoice_no" },
            { data: "invoice_date" },
            { data: "invoice_curr" },
            { data: "invoice_amount", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
            { data: "faktur_vat" },
            { data: "faktur_amount" },
            { data: "iss_no" },
            { data: "submit_date" },
            { data: "submit_by" },
            { data: "receive_by" }
        ],
        order: [ 1, 'asc' ],
        select: {
            //style:    'os',
            selector: 'td.select-checkbox'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $( table.table().container() ).on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $.fn.dataTable.ext.errMode = 'throw';

pls help to solve the issue

Answers

  • allanallan Posts: 61,864Questions: 1Answers: 10,136 Site admin

    Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

    Information on how to create a test page, if you can't provide a link to your own page can be found here.

    Thanks,
    Allan

This discussion has been closed.