javascript - Jquery UI Datatable: Add row to a table with textbox as column - Stack Overflow

admin管理员组

文章数量:1324431

I am trying to add a row to a datatable with no luck with the texbox and checkbox as columns. I am able to add the other columns easily but the one with textbox and checkbox don't have any idea on how to do that. The textbox and checkbox ids are evaluated appending their type with first column value. I am wondering what will be good way to achieve this? I'm not looking to clone a row since there may be scenarios where my table may not have any data. Any ideas?

Here is the client side code:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts);        
    $('#divButton').find('.toggle').on('click', function () {                 
         table1.fnAddData([4, 'Windows 7',7.1]);                          
          });
});

Here's the JSFiddle

I am trying to add a row to a datatable with no luck with the texbox and checkbox as columns. I am able to add the other columns easily but the one with textbox and checkbox don't have any idea on how to do that. The textbox and checkbox ids are evaluated appending their type with first column value. I am wondering what will be good way to achieve this? I'm not looking to clone a row since there may be scenarios where my table may not have any data. Any ideas?

Here is the client side code:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts);        
    $('#divButton').find('.toggle').on('click', function () {                 
         table1.fnAddData([4, 'Windows 7',7.1]);                          
          });
});

Here's the JSFiddle

• javascript
• c#
• jquery
• jquery-ui
• datatables

Share Improve this question Follow edited Nov 28, 2017 at 12:07 davidkonrad 85.6k1717 gold badges209209 silver badges271271 bronze badges asked Sep 27, 2015 at 16:21 user1527762user1527762 95744 gold badges1616 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can try this:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts); 
    var textbox = '<input type="text" class="txtBox">';
    var checkbox = '<input type="checkbox">';
    $('#divButton').find('.toggle').on('click', function () {                 
       table1.fnAddData([table1.fnSettings().fnRecordsTotal() + 1, 'Windows 7',7.1, textbox, checkbox]);                          
    });
});

Here is the FIDDLE.

You should use column rendering for this, not fnCreatedRow / createdRow. Here some examples of how to insert various <form> <input> elements :

...    
aoColumnDefs : [
   { aTargets : [1],
     mRender : function(data, type, full) {
        return '<input type="text" value="'+data+'"/>'
     }    
   },
   { aTargets : [2],
     mRender : function(data, type, full) {
        return '<input type="checkbox" checked="checked"/>'
     }    
   },
   { aTargets : [3],
     mRender : function(data, type, full) {
        return '<textarea>'+data+'</textarea>'
     }    
   }
]

have used the "oldschool" hungarian notation, it works both with 1.9.x and 1.10.x versions of datatables. A small demo (just added aoColumnDefs to an existing demo, it does not give any much sense besides the demonstration) -> http://jsfiddle/f6fqa641/

本文标签： javascriptJquery UI Datatable Add row to a table with textbox as columnStack Overflow