编辑器DataTables：不工作

时间：2017-04-18 01:09:46

标签： javascript php jquery twitter-bootstrap datatable

我是一个使用Javascript的新手，并且对Ajax没有任何想法，但我需要使用DataTables及其两个组件，Buttons和Editor。我只是复制了https://editor.datatables.net/examples/styling/bootstrap中给出的以下代码，但之后我不知道下一步是什么。我在https://editor.datatables.net/examples/styling/bootstrap复制代码，我得到了这个，如下所示。我的DataTables不工作，有什么不对，我无法保存到我的数据库并选择。我希望我能得到帮助。

的index.html 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.14/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap.min.js"></script>
    <script type="text/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: "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"
                    }
                ]
            } );

            var table = $('#example').DataTable( {
                lengthChange: false,
                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
            } );

            // Display the buttons
            new $.fn.dataTable.Buttons( table, [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ] );

            table.buttons().container()
                .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
        } );
    </script>
</head>
<body>
    <table id="example" class="table table-striped table-bordered" 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>
</body>
</html>

staff.php 

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "DataTables.php" );

// Alias Editor classes so they are easy to use
//I'm  a new with Javascript and didn't have any idea about Ajax but I need to use DataTables  and its two components, Buttons and Editor. I just copy past the following codes given in this https://editor.datatables.net/examples/styling/bootstrap but after that I didn't know what's next. The DataTables not working, I hope I've got help.
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'datatables_demo' )
    ->fields(
        Field::inst( 'first_name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'last_name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'position' ),
        Field::inst( 'email' ),
        Field::inst( 'office' ),
        Field::inst( 'extn' ),
        Field::inst( 'age' )
            ->validator( 'Validate::numeric' )
            ->setFormatter( 'Format::ifEmpty', null ),
        Field::inst( 'salary' )
            ->validator( 'Validate::numeric' )
            ->setFormatter( 'Format::ifEmpty', null ),
        Field::inst( 'start_date' )
            ->validator( 'Validate::dateFormat', array(
                "format"  => Format::DATE_ISO_8601,
                "message" => "Please enter a date in the format yyyy-mm-dd"
            ) )
            ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
            ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 )
    )
    ->process( $_POST )
    ->json();

staff.js 

{
  "data": [
    {
      "DT_RowId": "row_1",
      "first_name": "Tiger",
      "last_name": "Nixon",
      "position": "System Architect",
      "email": "t.nixon@datatables.net",
      "office": "Edinburgh",
      "extn": "5421",
      "age": "61",
      "salary": "320800",
      "start_date": "2011-04-25"
    },    
    {
      "DT_RowId": "row_57",
      "first_name": "Donna",
      "last_name": "Snider",
      "position": "Customer Support",
      "email": "d.snider@datatables.net",
      "office": "New York",
      "extn": "4226",
      "age": "27",
      "salary": "112000",
      "start_date": "2011-01-25"
    }
  ],
  "options": [],
  "files": []
}

1 个答案:

答案 0 :(得分：1)

我也像你一样尝试，复制并粘贴下面给出的链接，但没有任何反应。然后，我只需按照位于https://editor.datatables.net/manual/php/installing的说明即可获得以下解决方案。我做了以下方法。

  1. DataTables和Editor是功能强大的库，但在您使用它们之前，需要在您的系统上安装它们！因此，我们需要在https://editor.datatables.net/download/下载。但在我们下载之前，它需要我们有DataTables帐户。对我来说，我下载PHP免费试用。
  2. 然后我选择位于https://editor.datatables.net/manual/php/installing的SQL。对我来说，我选择并在https://editor.datatables.net/examples/sql/mysql.sql复制mySQL。我创建了我的数据库并将其作为查询执行。

  3. 然后我在我提取的下载文件中配置位于php文件夹的config.php。

    <?php if (!defined('DATATABLES')) exit(); 

error_reporting(E_ALL);
ini_set('display_errors', '1');

$sql_details = array(
    "type" => "Mysql", 
    "user" => "username",      
    "pass" => "password",       
    "host" => "localhost",      
    "port" => "",      
    "db"   => "databasename",       
    "dsn"  => ""      
);?>

  4. 然后我运行示例只需在我的网络浏览器中加载http://myWebSite.com/Editor-1.6.2/examples/Path。对我来说，我使用Bootstrap 3并使用以下代码：

    5. 的index.html 

    <!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 - Bootstrap 3</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.bootstrap.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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.14/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.bootstrap.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="../../js/editor.bootstrap.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() {
            // Modal Data Here
            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: "Email:",
                        name: "email"
                    }, {
                        label: "Office:",
                        name: "office"
                    }, {
                        label: "Extension:",
                        name: "extn"
                    }, {
                        label: "Start date:",
                        name: "start_date",
                        type: 'datetime'
                    },  {
                        label: "Age:",
                        name: "age",
                    }, {
                        label: "Salary:",
                        name: "salary"
                    }
                ]
            } );
            // End of Modal Data Here

            // Data Table Columns
            var table = $('#example').DataTable( {
                lengthChange: false,
                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: "age" },
                    { data: "position" },
                    { data: "email" },
                    { data: "office" },
                    { data: "extn" },
                    { data: "start_date" },
                    { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '&#8369;' ) }
                ],
                select: true
            } );
            // Data Table Columns

            // Display the buttons
            new $.fn.dataTable.Buttons( table, [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }

            ] );

            table.buttons().container()
                .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
        } );
    </script>
</head>
<body class="dt-example dt-example-bootstrap">
    <div class="container" style="margin-top:20px;">    
            <div class="demo-html"></div>
            <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Position</th>
                        <th>Email</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Position</th>
                        <th>Email</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
    </div>
</body>
</html>

    我的代码的压缩文件位于https://www.dropbox.com/sh/cbjq4t10vrmvy0r/AABt-iwwfrWdNycihY7rPm7ia?dl=0&preview=Editor-PHP-1.6.2.rar

相关问题
最新问题