zoukankan      html  css  js  c++  java
  • how to use datatables editor

    Basic initialisation

    Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that provides the ability to easily add, edit and delete rows on a database that is displayed by a DataTable. Editor provides a clean and responsive interface for end user manipulation of data, an expressive API for complete control and a well defined server communications protocol for data submission.

    This simple example shows a table with seven fields, each of which can be edited as plain text. In other examples we will explore how to add date pickers, select elements and other controls to make form input intuitive for the system user, among many other aspects of the Editor API.

    <table id="example" class="display" cellspacing="0" width="100%">

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>

    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: "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"
                }
            ]
        } );
     
        $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../php/staff.php",
            columns: [
                { data: null, render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.first_name+' '+data.last_name;
                } },
                { data: "position" },
                { data: "office" },
                { data: "extn" },
                { data: "start_date" },
                { data: "salary", render: $.fn.dataTable.render.number( ',''.', 0, '$' ) }
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
    } );
  • 相关阅读:
    TensorFlow学习笔记--CIFAR-10 图像识别
    第二章--第二节:注释
    webbrowser
    RichViewEdit
    RichEdit
    TreeView
    RichView
    ListView
    DesktopLoader服务程序
    Delphi实现程序只运行一次并激活已打开的程序
  • 原文地址:https://www.cnblogs.com/sdream/p/5417093.html
Copyright © 2011-2022 走看看