Jquery datatable input textbox to column

问题

Im using jquery datatable and below is the code. It is filled data successfully to datatable when clicking button. there is no problem in it.

  table = $('#customerMarkuptbl').DataTable({
            data: null,
            columns: [                           
                        { title: "CarrierID ", "data": "CarrierID", visible: false },
                        { title: "Carrier Service ID ", "data": "CarrierServiceID", visible: false },
                        { title: "Carrier ", "data": "CarrierName" },
                        { title: "Carrier Service", "data": "CarrierServiceName" },
                        {
                            title: "Markup ", "data": "MarkupValue",
                            render: function (data, type, row) {
                                return '<input class="form-control" id="Markup" name="Markup" type="text"  value = ' + row.MarkupValue + '  >';
                            }
                        },
            ]
        });

It is added a textbox column to the table. Then the user change text box value and it sends as json string to the server.

var ObjMarkup = $('#customerMarkuptbl').DataTable().data().toArray();

The issue is ObjMarkup doesnt contain changes of textboxes. It is always showing as 0. (Default it is set to 0 when retrieve data to datatable)

Below Example has sample row details which is outcome of "ObjMarkup". In below case I change the value of textbox and it not assign to the "ObjMarkup" variable.

Eg: CarrierID:42 CarrierName:"Test carrier" CarrierServiceID:625 CarrierServiceName:"Full load" MarkupValue:0

So whats the problem in this? Is there any solution? Why cant get textbox value to array?

回答1:

Add a class to your input in the Render function. I'll use trackInput for my example.

  table = $('#customerMarkuptbl').DataTable({
            data: null,
            columns: [                           
                        { title: "CarrierID ", "data": "CarrierID", visible: false },
                        { title: "Carrier Service ID ", "data": "CarrierServiceID", visible: false },
                        { title: "Carrier ", "data": "CarrierName" },
                        { title: "Carrier Service", "data": "CarrierServiceName" },
                        {
                            title: "Markup ", "data": "MarkupValue",
                            render: function (data, type, row) {
                                return '<input class="form-control trackInput" id="Markup" name="Markup" type="text"  value = ' + row.MarkupValue + '  >';
                            }
                        },
            ],
    "drawCallback": function( settings ) {
                  $(".trackInput").on("change",function(){
                       var $row = $(this).parents("tr");
                       var rowData = table.row($row).data();

                       rowData.MarkupValue = $(this).val();


                  })
            }
        });

Now

var ObjMarkup = $('#customerMarkuptbl').DataTable().data().toArray();

will give the correct values.

回答2:

I am not quite sure I understand what happen when "user change text box value and it sends as json string to the server" but you cannot retrieve the dynamic values of <input>'s (regardless of type) through data(). data() will only return the original values, there is no internal logic where changing the <input> also changes the underlying dataset.

So you must do that by yourself. Here is an example retrieving the dynamic value of an <input> inserted to the first column by a render() callback as above :

$('#example tbody').on('click', 'tr', function() {
  var $row = table.row(this).nodes().to$(),
      currentInputValue = $row.find('td:eq(0) input').val()
  console.log(currentInputValue)
})

demo -> http://jsfiddle.net/vp2j3mcd/

As mentioned I am not quite sure what you are trying to do, cannot replicate totally. But you could take the above code and

var ObjMarkup = $('#customerMarkuptbl').DataTable().data().toArray();
ObjMarkup.MarkupValue = currentInputValue
//...send (I guess)

回答3:

This will get the value:

table.cell(rowIdx,colIndx).nodes().to$().find('input').val()

来源：https://stackoverflow.com/questions/38366213/jquery-datatable-input-textbox-to-column

标签

jquery

datatables