I have purchased the Editor license almost 2 months. I still can't figure out how to use.

wonglik · April 23

Hi,

I have already purchased the Editor license (one developer) for almost 2 months. I can't even list the Table as before. It just feezed on screen. I still can't figure out how I can make use of the Editor for inline editing. Can I send in the programs for checking and advise?

Keith Wong

allan · April 23

Two months of debuging! Ouch! You should have posted sooner

Yes, please link to the page you are working on, and show also the server-side code, and I'll take a look at what is going wrong.

Allan

wonglik · April 23

$(document).ready(function () {
        var editor = new $.fn.dataTable.Editor({
            ajax: "../php_action/fetchOrderList.php",
                table: "#OrderListTable",
                fields: [{
                        label: "FinalRevCRDDate:",
                        name: "FinalRevCRDDate"
                    },
                        {
                        label: "FinalRevSewComplete:",
                        name: "FinalRevSewComplete"
                    }
            ]
        }];

        const  dataTable = $('#OrderListTable').DataTable({
                "lengthMenu": [[30, 60, 100, -1], [30, 60, 100, "All"]],
                sScrollY: "500px",
                scrollX: "100%",
                bscrollCollapse: true,
                colReorder: true,
                fixedHeader: true,
                dom: 'QlBfrtip',
                searchBuilder: {
                     columns: [0, 2, 3, 4, 5, 6, 7]
                 },
                 fixedColumns: {
                      left: 6,
                      right: 5
                      },
                 buttons: [
                     {
                       extend: 'excel',
                       title: null
                     }

                     ],

                'ajax': 'php_action/fetchOrderList.php',

                columns:  [{
                        data: "FinalRevCRDDate",
                        className: "editable"
                    },
                    {
                        data: "FinalRevSewComplete",
                        className: "editable"
                    }
                ]

        });

            $('#OrderListTable').on('click', 'td.editable', function() {
                editor.inline(this);
       });
});

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

wonglik · April 23

<?php

require_once 'core.php';

$userloc = $_SESSION['userloc'] ;

   $sql = "SELECT * from Orders where 1 order by RowOrder";

$result = $connect->query($sql);

$output = array('data' => array());

if($result->num_rows > 0) {

 // $row = $result->fetch_array();
 $active = "";

 while($row = $result->fetch_array()) {
         $sysid = $row[0];
         $FinalRevCRDDate = $row[39];
         $FinalRevSewComplete = $row[41];

   $output['data'][] = array(   // Gen Array
        $row[1],
        $row[2],
        $row[3],
        $row[4],
        $row[5],
        $row[6],
        $row[7],
        $row[8],
        $row[9],
        $row[10],
        $row[11],
        $row[12],
        $row[13],
        $row[14],
        $row[15],
        $row[16],
        $row[17],
        $row[18],
        $row[19],
        $row[20],
        $row[21],
        $row[22],
        $row[23],
        $row[24],
        $row[25],
        $row[26],
        $row[27],
        $row[28],
        $row[29],
        $row[30],
        $row[31],
        $row[32],
        $row[33],
        $row[34],
        $row[35],
        $row[36],
        $row[37],
        $row[38],
        $row[39],
        $row[40],
        $row[41],
        $row[42],
        $row[43],
        $row[44],
        $row[45],
        $row[46]
                );
 } // /while

}// if num_rows

$connect->close();

echo json_encode($output);

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

wonglik · April 23

<?php require_once 'php_action/db_connect.php' ?>
<?php require_once 'includes/header.php'; ?>

<div class="row">
        <div class="col-md-12">
           <div class="panel panel-default" style="margin-left:-200px; width:135%; font-size:10px; line-height:10px;">
                        <div class="panel-heading">
                                <div class="page-heading"> <i class="glyphicon glyphicon-edit"></i> Order List Processing</div>
                        </div> <!-- /panel-heading -->
                        <div class="panel-body">

                                <div class="remove-messages"></div>

                                <div class="div-action pull pull-right" style="padding-bottom:20px;">
                                </div> <!-- /div-action -->

                                <table class="cell-border compact stripe" id="OrderListTable">

                                        <thead>
                                                <tr>
                                                        <th>Row Order</th>
                                                        <th>Seq</th>
                                                        <th>Factory</th>
                                                        <th>Customer</th>
                                                        <th>Season</th>
                                                        <th>Buy</th>
                                                        <th>CoNew</th>
                                                        <th>issDate</th>
                                                        <th>Brand</th>
                                                        <th>ProductCategory</th>
                                                        <th>Style</th>
                                                        <th>CustomerStyle</th>
                                                        <th>Description</th>
                                                        <th>Product</th>
                                                        <th>T2</th>
                                                        <th>Fabric</th>
                                                        <th>FabricType</th>
                                                        <th>ProdType</th>
                                                        <th>Construction</th>
                                                        <th>EstEFF</th>
                                                        <th>PnNo</th>
                                                        <th>POQty</th>
                                                        <th>PNQty</th>
                                                        <th>MaterialArr</th>
                                                        <th>ExpExFty</th>                                                                                    <th>FtyLine</th>
                                                        <th>ProdPN</th>
                                                        <th>Color</th>
                                                        <th>Gender</th>
                                                        <th>ProdQty</th>
                                                        <th>Cutting</th>
                                                        <th>Allocate</th>
                                                        <th>StartSew</th>
                                                        <th>SewComplete</th>
                                                        <th>Add4Days Packing</th>
                                                        <th>1stRev CRDDate</th>
                                                        <th>2ndRev CRDDate</th>
                                                        <th>3rdRev CRDDate</th>
                                                        <th>FinalRev CRDDate</th>
                                                        <th>FtyRev SewComplete</th>
                                                        <th>FinalRev SewComplete</th>
                                                        <th>Delay Days</th>
                                                        <th>Delay Days Range</th>
                                                </tr>
                                        </thead>
                                </table>                                                                                             <!-- /table -->

                        </div> <!-- /panel-body -->                                                                  </div> <!-- /panel -->
        </div> <!-- /col-md-12 -->
</div> <!-- /row -->



<script src="custom/js/orderlist.js"></script>                                                       
<?php require_once 'includes/footer.php'; ?>

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

wonglik · April 23

Awaiting for your help.

allan · April 23

And what happens when you run it? Any error messages?

Also, can you use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is.

Even better would be if you can link to the page?

And finally, you haven't used the provided Editor PHP libraries. Do you plan to, or are you planning to implement your own server-side database updates?

Allan

wonglik · April 24

orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/bootstrap/css/bootstrap-theme.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/font-awesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/extensions/Editor/css/editor.dataTables.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/css/editor.dataTables.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/plugins/fileinput/css/fileinput.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/jquery-ui/jquery-ui.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/font-awesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/bootstrap/css/bootstrap-theme.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/extensions/Editor/css/editor.dataTables.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/css/editor.dataTables.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/jquery-ui/jquery-ui.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
orderlist.php:1 Refused to apply style from 'https://192.168.1.251/assests/plugins/fileinput/css/fileinput.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
dataTables.editor.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

editor.dataTables.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

jquery-ui.min.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

orderlist.php:1 Refused to execute script from 'https://192.168.1.251/assests/jquery-ui/jquery-ui.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
dataTables.editor.min.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

orderlist.php:1 Refused to execute script from 'https://192.168.1.251/extensions/Editor/js/dataTables.editor.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
orderlist.php:1 Refused to execute script from 'https://192.168.1.251/js/dataTables.editor.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
orderlist.php:1 Refused to execute script from 'https://192.168.1.251/js/editor.dataTables.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
orderlist.js:14 Uncaught SyntaxError: missing ) after argument list

wonglik · April 24

I have added the Editor in a header.php script.

wonglik · April 24

Header.php

<?php require_once 'php_action/core.php'; ?>

<!DOCTYPE html>
<html>
<head>

    <title>Order Processing</title>

   <!-- bootstrap -->
    <link rel="stylesheet" href="assests/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap theme-->
    <link rel="stylesheet" href="../assests/bootstrap/css/bootstrap-theme.min.css">
    <!-- font awesome -->
    <link rel="stylesheet" href="../assests/font-awesome/css/font-awesome.min.css">

</head>

<body>

<nav class="navbar navbar-default navbar-static-top">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="#" style="padding:0px;">
<img src="logo.png" alt="">
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

     <ul class="nav navbar-nav navbar-right">

      <li id="navDashboard"><a href="index.php"><i class="glyphicon glyphicon-home"></i>  Dashboard</a></li>
      <?php if(isset($_SESSION['userId']) && $_SESSION['userlvl']<4) { ?>
       <li class="dropdown" id="navOrder">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="glyphicon glyphicon-usd"></i>  Order Processing <span class="caret"></span></a>

         <ul class="dropdown-menu">
            <?php if(isset($_SESSION['userId']) && $_SESSION['userlvl']<3) { ?>
           <li id="topNavManageOrder"><a href="orderlist.php?o=manord"> <i class="glyphicon glyphicon-edit"></i> Order List Processing</a></li>
            <?php } ?>
         </ul>
       </li>
      <?php } ?>

      <li class="dropdown" id="navOrder">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="glyphicon glyphicon-usd"></i>  Order Status Reports  <span class="caret"></span></a>

         <li id="topNavLogout"><a href="logout.php"> <i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
        </ul>
      </li>

    </ul>
</div><!-- /.navbar-collapse -->

</div>
</nav>

<

div class="container">

wonglik · April 24

Sorry, you have reminded me how to debug. I have fixed the 404 problems. But now, still have the error as below.

jquery-3.7.1.js:3783 jQuery.Deferred exception: Cannot read properties of undefined (reading 'sWidth') TypeError: Cannot read properties of undefined (reading 'sWidth')
at HTMLTableCellElement.<anonymous> (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:37674)
at Function.each (https://code.jquery.com/jquery-3.7.1.js:383:19)
at jQuery.fn.init.Qt (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:37608)
at https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:47589
at Function.map (https://code.jquery.com/jquery-3.7.1.js:506:13)
at R (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:47536)
at y (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:23615)
at u (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:23863)
at Jt (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:33052)
at t (https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js:4:8610) undefined
jquery-3.7.1.js:3793 Uncaught TypeError: Cannot read properties of undefined (reading 'sWidth')
at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:4:37674)
at Function.each (jquery-3.7.1.js:383:19)
at jQuery.fn.init.Qt (jquery.dataTables.min.js:4:37608)
at jquery.dataTables.min.js:4:47589
at Function.map (jquery-3.7.1.js:506:13)
at R (jquery.dataTables.min.js:4:47536)
at y (jquery.dataTables.min.js:4:23615)
at u (jquery.dataTables.min.js:4:23863)
at Jt (jquery.dataTables.min.js:4:33052)
at t (jquery.dataTables.min.js:4:8610)

kthorngren · April 24

Cannot read properties of undefined (reading 'sWidth')

Usually this is due to having a different number of columns configured in HTML versus in the the Datatables initialization code, ie, columns. If this doesn't help please post a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wonglik · April 24

In the test there are 40+ columns but for inline Editing I only setup for 2 columns for test. Can that be done or I have to setup all 40+ columns for editing?

wonglik · April 24

I found that it's the ajax format not suitable for Editor. Before I was using array in dataTable listings. Should I change to include field names in the ajax file?

wonglik · April 24

After changing the ajax. It now has error
jquery.dataTables.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at jquery.dataTables.min.js:4:33135
at Object.e [as success] (jquery.dataTables.min.js:4:25877)
at fire (jquery-3.7.1.js:3223:31)
at Object.fireWith [as resolveWith] (jquery-3.7.1.js:3353:7)
at done (jquery-3.7.1.js:9627:14)
at XMLHttpRequest.<anonymous> (jquery-3.7.1.js:9888:9)

wonglik · April 24

Changed to the simplest fetchdata.php

<?php

require_once 'core.php';

$userloc = $_SESSION['userloc'] ;

$sql = "SELECT * from Orders where 1 order by RowOrder";

$result = $connect->query($sql);

$output = array('data' => array());

if($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
$data[] = $row;
} // /while

}// if num_rows

$connect->close();

header('Content-Type: application/json');
echo json_encode($data);

wonglik · April 24

Can tell me how I can resolve this earlier? I have been trying for so long time to get this Editor workable in my applications.

allan · April 24

In the test there are 40+ columns but for inline Editing I only setup for 2 columns for test. Can that be done or I have to setup all 40+ columns for editing?

No - you can specify only specific columns for inline editing. See this example.

I don't actually see your DataTables initialisation in the above deluge of code, but, if you are using the Ajax option you will also need to use ajax.dataSrc set to be an empty string, since you appear to be returning a top level array of data. See this example.

If you want to do editing, I'd very much encourage you to consider using the Editor PHP libraries. Use Generator to get a quick start for the code needed.

Allan

wonglik · April 24

I have tested with the Generator. It can help to generate workable programs. But I need the Excel like inline editing. How can I change it?

allan · April 24

Add something like this to the initialisation JS code that Generator produces:

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

See the example here.

Allan

wonglik · April 24

Thank you. I can manage inline editing now. But one more question, how to change to Excel like inline editing? Can move around freely.

wonglik · April 24

Also, can add a copy button also?

kthorngren · April 24

But one more question, how to change to Excel like inline editing? Can move around freely.

Use the KeyTable extension like this example.

can add a copy button also?

Yes. See the copyHtml5 button docs for details. Make sure to include the HTML5 export library to suport the Copy button. Use the Download Builder to get the appropriate files for your solution.

Kevin

wonglik · April 25

I have followed the page to add the same 'keys' , 'select' sections to the test. It still can't do Excel like inline editing. Do I have to add in all the mentioned js and css libraries from the purchased Editor-PHP-2.3.2 to the index.html?

allan · April 25

Perhaps you can link to the page you are working on so I can see what might be going wrong? The example Colin linked to appears to be working correctly, so there must be something on your page that we need to identify as the issue or missing.

Allan

allan · April 25

Do I have to add in all the mentioned js and css libraries from the purchased Editor-PHP-2.3.2 to the index.html?

Missed this point - sorry. Use the download builder to make sure you get all the files you need (and only the files you need).

Allan

I have purchased the Editor license almost 2 months. I still can't figure out how to use.

I have purchased the Editor license almost 2 months. I still can't figure out how to use.

Answers

Howdy, Stranger!

Categories

DataTables

I have purchased the Editor license almost 2 months. I still can't figure out how to use.

I have purchased the Editor license almost 2 months. I still can't figure out how to use.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables