X-редактируемый с DataTable через JSON - PullRequest
Новая
       21

X-редактируемый с DataTable через JSON

0 голосов
/ 16 марта 2019

Пожалуйста, у меня есть HTML-таблица, в которую я хочу загрузить данные JSON через AJAX из базы данных, а также реализовать встроенное редактирование с использованием библиотеки X-Editable, но после загрузки я не могу редактировать ячейки напрямую 

<table id="curtable" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
                                                                data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
                                                                <thead>
                                                                    <tr>
                                                                        <th data-field="Description" data-editable="true">Description</th>
                                                                        <th data-field="ShortName" data-editable="true">Short Name</th>
                                                                        <th data-field="Symbol" data-editable="true">Symbol</th>
                                                                        <th data-field="Country" data-editable="true">Country</th>
                                                                        <th data-field="Active" >Active</th>
                                                                        <th data-field="isFuntional">Functional</th>
                                                                        <th data-field="ExRate" data-editable="true">Rate</th>
                                                                    </tr>
                                                                </thead>

                                                            </table>

Ниже приведен вызов AJAX, после вызова я не могу щелкнуть любую ячейку для редактирования, но при вводе данных вручную с помощью тегов tr и td я могу редактировать ячейки 

            $.ajax({
            url: 'RhemaServices.asmx/GetCurrencies',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset-utf-8",
            success: function (data) {
                datatableVariable = $('#curtable').DataTable({
                    data: data,
                    responsive: true,
                    columns: [
                        { 'data': 'Description' },
                        { 'data': 'ShortName' },
                        { 'data': 'Symbol' },
                        { 'data': 'Active' },
                        { 'data': 'isFuntional' },
                        { 'data': 'ExRate' }

                    ],

                    //,
                    columnDefs: [
                        {
                            "targets": 4,
                            render: function (data, type, row) {
                                if (data === true) { return "Yes" } else { return "No" }
                            }
                        },
                        {
                            "targets": 5,
                            render: function (data, type, row) {
                                if (data === true) { return "Yes" } else { return "No" }
                            }
                        }
                    ]

                });
            }

        });

1 Ответ

0 голосов
/ 05 мая 2019

Datatables имеет встроенную функциональность для обработки ajax https://datatables.net/reference/option/ajax

datatableVariable = $('#curtable').DataTable({
  ajax: {
    url: 'RhemaServices.asmx/GetCurrencieso',
    type: "POST",
  },
  columns: [
    {
      data: 'Description',
    },
    {
      data: 'ShortName',
    },
    {
      data: 'Symbol',
    },
    {
      data: 'Active',
    },
    {
      data: 'isFuntional',
      render: function(data, type, row, meta){ 
        if(type === 'display'){ 
          data = '<a href="#" data-name="isFuntional" class="editable" data-type="text" data-pk="'+row.ID+'" data-url="ajax/ajax_url_here" data-title="Enter isFuntional">'+data+'</a>';
        }
        return data;
      }
    },
    {
      data: 'ExRate',
      render: function(data, type, row, meta){ 
        if(type === 'display'){ 
          data = '<a href="#" data-name="ExRate" class="editable" data-type="text" data-pk="'+row.ID+'" data-url="ajax/ajax_url_here" data-title="Enter ExRate">'+data+'</a>';
        }
        return data;
      }
    },
  ],
  fnDrawCallback: function( oSettings ) {
    $('.editable').editable({
      success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
      },
      error: function(response, newValue) {
        if(response.status === 500) {
          return 'Service unavailable. Please try later.';
        } else {
          return response.responseText;
        }
      }
    });
  }
});

Внутри вызова ajax вы захотите передать ассоциативный массив с данными json в ячейку с именем data

пример 

echo json_encode(array('status' => 'success', 'data' => $allSubmissions))
...