add new row - new data for input

add new row - new data for input

meier_999meier_999 Posts: 2Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • meier_999meier_999 Posts: 2Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited May 2021

    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

This discussion has been closed.