Edit Datatable Cells Inline without post

Edit Datatable Cells Inline without post

Peter HannaPeter Hanna Posts: 2Questions: 1Answers: 0
edited August 2016 in Free community support

I am evaluating Datatables 1.10.12 and the editor in "trial mode". Note the dataTables.editor.min.js is the one downloaded as part of the trial. This may need to be re-referenced in any modifications you make.

I want to be able to edit cells in a STATIC html datatable without any ajax posting.

I have had some success in the static table edits. I.E You can click a cell and type but the updates won't stick?
After the first cell click, I can also no longer click to edit other cells for some reason.

Can you please advise where I am going wrong or what needs to be changed to accomplish this

The complete HTML is below.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.css"/>  
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css"/>   
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet" href="editor.dataTables.min.css"/>
    
    
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>  
    <div>
        <div style="width: 100%; float: left; padding: 10px">
            <strong><u>Sample Table</u></strong>
            <table class="table table-striped table-bordered table-hover" id="dt_mytable">
                <thead>
                    <tr >
                        <th>Column1 Heading</th>
                        <th>Column2 Heading</th>
                        <th>Column3 Heading</th>
                        <th>Column4 Heading</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="row_9">
                        <td>Row 0 Column 1</td>
                        <td>Row 0 Column 2</td>
                        <td>Row 0 Column 3</td>
                        <td>Row 0 Column 4</td>
                    </tr>
                    <tr id="row_1">
                        <td>Row 1 Column 1</td>
                        <td>Row 1 Column 2</td>
                        <td>Row 1 Column 3</td>
                        <td>Row 1 Column 4</td>
                    </tr>
                    <tr id="row_2">
                        <td>Row 2 Column 1</td>
                        <td>Row 2 Column 2</td>
                        <td>Row 2 Column 3</td>
                        <td>Row 2 Column 4</td>
                    </tr>
                    <tr id="row_3">
                        <td>Row 3 Column 1</td>
                        <td>Row 3 Column 2</td>
                        <td>Row 3 Column 3</td>
                        <td>Row 3 Column 4</td>
                    </tr>
                    <tr id="row_4">
                        <td>Row 4 Column 1</td>
                        <td>Row 4 Column 2</td>
                        <td>Row 4 Column 3</td>
                        <td>Row 4 Column 4</td>
                    </tr>
                    <tr id="row_5">
                        <td>Row 5 Column 1</td>
                        <td>Row 5 Column 2</td>
                        <td>Row 5 Column 3</td>
                        <td>Row 5 Column 4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


<script type="text/javascript">

    $(document).ready(function ()
    {
        var editor;
    
        // Set up the editor
        editor = new $.fn.dataTable.Editor( {
            table: "#dt_mytable",
            fields: [
                {
                    label: "Column1 Heading",
                    name: "column1"
                }, {
                    label: "Column2 Heading:",
                    name: "column2"
                }, {
                    label: "Column3 Heading",
                    name: "column3"
                }, {
                    label: "Column4 Heading",
                    name: "column4"
                }
            ]
        } );


        // Activate an inline edit on click of a table cell
        $('#dt_mytable').on( 'click', 'tbody td.editable', function (e) {
            editor.inline( this );
        } );
    
        
        $('#dt_mytable').DataTable( {
            dom: "Bfrtip",
            columns: [
                { data: "column1" , className: 'editable'},
                { data: "column2", className: 'editable' },
                { data: "column3", className: 'editable' },
                { data: "column4", className: 'editable' }
            ],
            select: true
        } );
    });//Close Document Ready Function

</script>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.jqueryui.min.js"></script>
<script src="dataTables.editor.min.js"></script>

</body>
</html>
    

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,552Questions: 1Answers: 10,670 Site admin
    Answer ✓

    This isn't a built in feature of Editor (yet) I'm afraid. It will be coming in 1.6, but in the mean time, i put this little example together showing how a local edit can be done: http://live.datatables.net/cazatabe/1/edit . It doesn't do create or delete, although those could be added if you need them. The key is to override the ajax call that Editor makes and replace it with a local data update.

    As I say, that is a feature that will be built into 1.6 (likely to be released in roughly 2 months time).

    Regards,
    Allan

This discussion has been closed.