Datatable editable

rizwansultan88 · November 2017

Using datatable editable I'm facing 2 issues one thing is that complete table jerk when we click any field it shake complete table it should work like sample editable 2nd this is that editable fields getting unexpected width
I'm also attaching screenshot please help me out to fixed that issue.

@Alan please help me out to figure out the issue

allan · November 2017

Are you using the Editor extension for DataTables? Or something else?

Can you give me a link to the test case showing the issue please? It looks like your select input is simply very wide. Perhaps a width needs to be applied to it.

Allan

rizwansultan88 · November 2017

Yes @allan its editable plugin
See that link
https://www.screencast.com/t/hEO4jte5Mvwx

It showing weird I'm using same sample code editable make jerks also it post more than 1 value on editing that I'm also try to upload code to show you that the table is completely.
That one is sample code I used from example


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Editor example - Simple inline editing</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">
    


var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            },{
                label: "First name:",
                name: "first_name_new1"
            }, {
                label: "First name:",
                name: "first_name_new2"
            }, {
                label: "First name:",
                name: "first_name_new3"
            },{
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );

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

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "first_name" },
            { data: "first_name_new1" },
            { data: "first_name_new2" },
            { data: "first_name_new3" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );



    </script>
</head>
<body class="dt-example">
    <div class="container">
        <section>
             
            <div class="demo-html"></div>
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>First name</th>
                        <th>First name New1</th>
                        <th>First name New2</th>
                        <th>First name New3</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th width="18%">Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
            </table> 
         
        </section>
    </div>
     
</body>
</html>

allan · November 2017

Try adding this to your CSS:

div.DTE.DTE_Inline select {
  width: 150px;
}

Allan

Datatable editable

Datatable editable

Answers

Howdy, Stranger!

Categories

DataTables

Datatable editable

Datatable editable

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables