add new row - new data for input

meier_999

Hello together,

I am using DataTable 1.8. In the table are input fields which are filled via Ajax. Filling the fields works very well.
I want the user to add a new row. This does not work, the data is not displayed.

$('#addRow').on('click', function () {
    var t = $('#test').DataTable();
    var obj ='{"data":[{"DT_RowId":"1","pos":"2","price":"10.00"}]}'
    t.row.add(obj).draw();
});

How can I insert data into input fields? A new row is inserted with the content "undefined".
thanks

colin

You could try columns.render, or possibly columns.createdCell,

Colin

meier_999

Hi Collin,
thanks for your answer.
I tried to work with columns.render and columns.createdCell. Unfortunately it does not work correctly. I just don't know how to get data into the fields.

columns: [
            {
                data: null,
                render: function(data, type, row) {
                return '<input  type="text" placeholder="" value="" id="position" name="position">';
                }
            },{
                data: null,
                render: function(data, type, row) {
            {
                data: null,
                render: function(data, type, row) {
                return '<input  type="text" placeholder="" value="" id="price" name="price">';
                }
            }
]

When I add a new row here, it always outputs "undefined". How can I write data into the value of the fields?
Or how can I enter a new row, with new input fields?

$('#addRow').on('click', function ({
   columns: [
     {
       data: null,
       render: function(data, type, row) {
       return '<input  type="text" placeholder="" value="1" id="position" name="position">';
       }
        },{
         data: null,
          render: function(data, type, row) {
       {
         data: null,
         render: function(data, type, row) {
         return '<input  type="text" placeholder="" value="0.00" id="price" name="price">';
          }
         }
      ]
      }) {
           var t = $('#test').DataTable();
           var obj ='{"data":[{"DT_RowId":"1","pos":"2","price":"10.00"}]}'
           t.row.add(obj).draw();
    });

When I add a new row with a new definition, it is not displayed. Also not, if I do not insert any input fields, but only text.

Do you have another idea?
THANKS

kthorngren

Take a look at this example:
https://datatables.net/examples/basic_init/data_rendering.html

I copied your code into this test case:
http://live.datatables.net/leletoqe/1/edit

You have some syntax errors and other errors:

1. The columns option needs to be defined within the Datatables initialization.
2. Looks like you want to use the data as the input id. Be careful with this has each id needs to be unique on the page. You probably don't want to do this.
3. Make sure you understand the difference between row.add() (one row) and rows.add() (multiple rows). You have an array of data which will be used with rows.add().
4. In line 20 the obj needs to be a Javascript object not a string.

I fixed a few other things in the example.

You will want to read about jQuery delegated events to create an event handler for the inputs. Also take a look at this example. I show an example in the test case for your inputs.

Kevin