2017-01-09 1 views
0

Я пытаюсь использовать дату и время ввода в DataTables используется здесь https://editor.datatables.net/examples/dates/datetime.htmlDataTables Дата и время ввода

Это то, что я пытался

<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, но он не отображается правильно. Это выход, который я получаю

enter image description here

Кроме того, я не понимаю, что эта линия ajax: '../php/datetime.php' для. Я не вижу, что такое datetime.php, о котором идет речь в документации.

Это мой первый раз, когда я пытаюсь использовать datatables, поэтому я не знаю, где я ошибся. Я уже пробовал базовое создание данных и работал, но у меня была проблема, когда я пытался включить дату и время ввода в свои коды.

UPDATE 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(); 

Где я должен поставить это?

+0

его функция async 'load' для исходных данных. – softwarenewbie7331

+0

Вы связали сценарии с запиской ниже [code sample] (https://editor.datatables.net/examples/dates/datetime.html)? Найдите текст «В дополнение к приведенному выше коду, следующие файлы библиотеки Javascript загружаются для использования в этом примере:« там. –

+0

Так что, в принципе, мне это не нужно, если я уже вручную ввел данные в таблицу в моем примере? –

ответ

0

я тяну этот фрагмент кода с сайта вы предоставили ссылку на:

$('#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

Ссылка приведена в качестве примера: .. ../php/datetime.php.
datetime.php - это файл, который вы должны были бы сделать в php.
В этом случае datetime.php работает в фоновом режиме и, возможно, запрашивает некоторую базу данных.

+0

Вижу. Так что, в основном, мне это не нужно, потому что сейчас я вручную вводил данные в свою таблицу. Но мне интересно, почему базовые коды не работают. –

+0

Когда вы говорите, что основные коды не работают. Вы имеете в виду, почему данные автоматически не заполняют вашу форму? Вы спрашиваете, почему вы должны вводить данные вручную? –

+0

Нет. Я имею в виду, почему моя таблица не работает так же, как пример в документации? Потому что я уже выполнил основные части, кроме «Серверного скрипта» и «Ajax Load» в документации. –