Datatables inline editing

Datatables inline editing DEFAULT

Whole row - inline create

This example demonstrates how Editor can show the form input elements inline with a table, rather than in a modal, which can help create a more fluid interface - although it should be noted much less flexible since you are limited to only the columns shown in the table.

Here we use the button, which in turn uses the method to insert a blank row at the top of the table where the end user can enter information and submit to create a new row in the database.

You might also notice the use of the and . These are used when creating a new row and when editing to display a submit button in the row - in this case in the second last column ( index).

First nameLast namePositionOfficeStart dateSalary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

Other examples

Sours: https://editor.datatables.net/examples/inline-editing/fullRowCreate.html

CellEdit

A plugin for DataTables.net

Overview

This plugin allows cells within a DataTable to be editable. When a cell is click on, an input field will appear. When focus is lost on the input and the underlying DataTable object will be updated and the table will be redrawn. The new value is passed to a callback function, along with it's row, allowing for easy server-side data updates.

Example image

Usage

MakeCellsEditable(settings);

Settings { JSON Object }
PropertyTypeDefaultExampleDetails
onUpdatefunctionThe call back function to be executed. The updated cell, row, and previous value in that cell are passed as arguments.
onValidate(optional)functionnoneThe call back function to be executed before updating the cell value. The relevant cell, row, and new value in the editor are passed as arguments. The function should return if the value is valid, or if it does not pass validation logic.
inputCss(optional)stringnoneA CSS class that will be applied to the input field
wrapperHtml(optional)stringnoneHTML used to wrap the inline editor. Use as the placeholder for the inline editor.
columns(optional)arrayAll columnsAn array of column indexes defining the columns that you want to be editable.
allowNulls(optional)objectfalseDetermines which columns should allow null values to be entered and what CSS to apply if user input fails validation. If errorClass is null a default error class will be applied.
confirmationButton(optional)bool | objectfalseWill cause two links to appear after the input; "Confirm" and "Cancel". User input will not be accepted until "Confirm" is clicked by the user. You can optionally pass in an object with confirmCss and cancelCss properties instead of boolean. These properties specify the CSS classes that should be applied to the Confirm and Cancel anchor tags. If you would like Enter and Escape keys to Confirm/Cancel also, add another property listenToKeys and set it to true.
inputTypes(optional)object arraytext"inputTypes": [{"column":0, "type":"text", "options":null }]Allows you to change the type of input that appears (IE dropdown or text). As different types of inputs are added I will update the advanced initialization example below with examples.

Basic Initialization

vartable=$('#myTable').DataTable();functionmyCallbackFunction(updatedCell,updatedRow,oldValue){console.log("The new value for the cell is: "+updatedCell.data());console.log("The values for each cell in that row are: "+updatedRow.data());}table.MakeCellsEditable({"onUpdate": myCallbackFunction});

Advanced Initialization

vartable=$('#myAdvancedTable').DataTable();functionmyCallbackFunction(updatedCell,updatedRow,oldValue){console.log("The new value for the cell is: "+updatedCell.data());console.log("The values for each cell in that row are: "+updatedRow.data());}table.MakeCellsEditable({"onUpdate": myCallbackFunction,"inputCss":'my-input-class',"columns": [0,1,2],"allowNulls": {"columns": [1],"errorClass": 'error'},"confirmationButton": {"confirmCss": 'my-confirm-class',"cancelCss": 'my-cancel-class'},"inputTypes": [{"column":0,"type":"text","options":null},{"column":1,"type": "list","options":[{"value": "1","display": "Beaty"},{"value": "2","display": "Doe"},{"value": "3","display": "Dirt"}]},{"column": 2,"type": "datepicker",// requires jQuery UI: http://http://jqueryui.com/download/"options": {"icon": "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"// Optional}}]});
Destroy

If you need to destroy a table and then reinitialize it, you'll need to destroy the MakeCellsEditable configuration as well. You can do this by passing "destroy" to the method. An example of this can be found in the advanced example.

table.MakeCellsEditable("destroy");
Sours: https://github.com/ejbeaty/CellEdit
  1. Carter lake weather radar
  2. Ruger pistols
  3. Spending time synonyms

Simple inline editing

Editor has three different Editor modes:

  • Primary editing
  • Bubble editing
  • Inline editing

Inline editing, as shown demonstrated in this section, is designed to allow rapid editing of individual fields in a table. The most common use case is to simply click on the cell you want to edit and then hit return once the edit is complete. This will save the data and the row will be immediately updated.

This example shows inline editing on all data columns in the table. The primary editing interface of Editor is also still available, with row selection being made available by clicking in the first column (the checkbox shown is provided by Select's column class). In this manner you get the benefits of rapid editing as well as the ability to create, edit and delete full records very easily.

Inline editing in Editor is activated through the use of the API method. Simply call the method and pass in the cell you want to edit as the first parameter. Editor will attempt to automatically determine which parameter is to be edited. Alternatively, or if Editor is unable to determine the field automatically, use the second parameter to tell it which field to edit.

First nameLast namePositionOfficeStart dateSalary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script

The Javascript shown below is used to initialise the table shown in this example:

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

Other examples

Sours: https://editor.datatables.net/examples/inline-editing/simple
In-Place Editing in DataTable with X-Editable using PHP Ajax

.

Inline editing datatables

.

Inline Editor Table with jQuery

.

You will also like:

.



463 464 465 466 467