Question

我正在尝试在此处使用的数据表中使用日期和时间输入https://editor.datatables.net/examples/dates/datetime.html

这就是我试过的

    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.1.1.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/materialize.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery.dataTables.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/moment.js');?>"></script>
    <script type="text/javascript">
        //use a global for the submit and return data rendering in the examples
        var editor;

        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor( {
                table: '#receivablesLogs',
                fields: [ {
                        label: 'Date:',
                        name: 'date'
                        type: 'datetime',
                        def: function () { return new Date(); },
                        format: 'MM-DD-YYYY',
                        fieldInfo: 'US style m-d-y date input'
                    }, 
                    {
                        label: 'Invoice Number:',
                        name: 'invoice_number'
                    }, 
                    {
                        label: 'Customer Name:',
                        name:'customer_name'
                    }, 
                    {
                        label: 'Total Amount:',
                        name:  'total_amount'
                    },
                    {
                        label: 'Due Date:',
                        name: 'due_date'
                        type: 'datetime',
                        def: function () { return new Date(); },
                        format: 'MM-DD-YYYY',
                        fieldInfo: 'US style m-d-y date input'
                    }
                ]
            } );

            $('#receivablesLogs').DataTable( {
                dom: 'Bfrtip',
                columns: [
                    {data: 'date'},
                    {data: 'invoice_number'},
                    {data: 'customer_name'},
                    {data: 'total_amount'},
                    {data: 'due_date'}
                ],
                select: true,
                order: [[ 0, 'asc' ]],
                bFilter: false,
                bLengthChange: false,
                paging: false,
                bFiler: false
            });
        });
    </script>

这是我的表

    <table id="receivables" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Invoice Number</th>
                    <th>Customer Name</th>
                    <th>Total Amount</th>
                    <th>Due Date</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>03/31/2014</td>
                    <td>12456</td>
                    <td>Customer One</td>
                    <td>160,000.00</td>
                    <td>04/25/2015</td>
                </tr>

                <tr>
                    <td>02/28/2015</td>
                    <td>12456</td>
                    <td>Customer One</td>
                    <td>160,000.00</td>
                    <td>04/25/2015</td>
                </tr>
            </tbody>
        </table>

但我不知道我哪里出错了。我导入了正确的js文件，但无法正确显示。这是我得到的输出

此外，我还没有得到此行ajax: '../php/datetime.php'的内容。我没有看到文档所指的datetime.php是什么。

这是我第一次尝试数据表，所以我不知道我做错了什么。我已经尝试了数据表的基本创建，但是当我尝试在我的代码中加入日期和时间输入时，我遇到了问题。

更新1：文档中存在这样的服务器端脚本

<?php

/*
 * Example PHP implementation used for date time examples
 */

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

// Alias Editor classes so they are easy to use
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, 'users' )
    ->fields(
        Field::inst( 'first_name' ),
        Field::inst( 'last_name' ),
        Field::inst( 'updated_date' )
            ->validator( 'Validate::dateFormat', array(
                'empty' => false,
                'format' => 'm-d-Y g:i A'
            ) )
            ->getFormatter( 'Format::datetime', array(
                'from' => 'Y-m-d H:i:s',
                'to' =>   'm-d-Y g:i A'
            ) )
            ->setFormatter( 'Format::datetime', array(
                'from' => 'm-d-Y g:i A',
                'to' =>   'Y-m-d H:i:s'
            ) ),
        Field::inst( 'registered_date' )
            ->validator( 'Validate::dateFormat', array(
                'format' => 'j M Y H:i'
            ) )
            ->getFormatter( 'Format::datetime', array(
                'from' => 'Y-m-d H:i:s',
                'to' =>   'j M Y H:i'
            ) )
            ->setFormatter( 'Format::datetime', array(
                'from' => 'j M Y H:i',
                'to' =>   'Y-m-d H:i:s'
            ) )
    )
    ->process( $_POST )
    ->json();

我应该把它放在哪里？

Answer 1

我从您提供链接的网站中提取此代码段：

$('#example').DataTable( {
        dom: 'Bfrtip',
        ajax: '../php/datetime.php',
        columns: [
            { data: 'first_name' },
            { data: 'last_name' },
            { data: 'updated_date' },
            { data: 'registered_date' }
        ],
        select: true,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

Ajax是一组在幕后动态加载数据的技术。
这里的一些信息：https://developer.mozilla.org/en-US/docs/AJAX

链接：＆＃34; ../ php / datetime.php＆＃34;给出了一个例子 datetime.php是一个你必须在php中实际制作的文件在这种情况下，datetime.php在后端运行，可能会查询某些数据库。

数据表日期和时间输入

1 个答案: