Add jQuery DataTables rows with dropdown and input field for each row on click event?

Question

Currently i have the following html table:

<body>       
    <button id="addRow" type="button" class="btn btn-info fa fa-plus">  </button>
    <table id="ItemTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>                    
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>                    
            </tr>
        </tfoot>
    </table>
</body>

and this my jquery script:

 $(document).ready(function () {
    var t = $('#ItemTable').DataTable({
       // Add for each row a drop down list
    });

    var counter = 1;

    $('#addRow').on('click', function () {
        t.row.add([                
            "Add input field" (InvoiceDescription),
            "Add input field" (ItemType),                
            "Add for each row a drop down list (Unit)"
        ]).draw(false);

        counter++;
    });

    // Automatically add a first row of data
    $('#addRow').click();
});

I need to add table rows with dropdown and input field, for each row on click event, so that the user can enter data inline and post back to the server. I am using ASP.NET MVC if that matters, with the following controller and action:

[Authorize]
public class ItemController : BaseController
{
   private readonly IItemRepositoryService itemRepositoryService;

   public ItemController(IItemRepositoryService itemRepositoryService)
   {
       this.itemRepositoryService = itemRepositoryService;                
   }

   public JsonResult Add(ItemViewModel ItemViewModel)
   {
       itemRepositoryService.SaveItem(ItemViewModel, UserId);
       return Json(1, JsonRequestBehavior.AllowGet);
   }    
}

And this is my model:

public class ItemViewModel
{          
   public string Unit{ get; set; }
   public string ItemType{ get; set; }       
   public string InvoiceDescription { get; set; }        
}

as I said I am using jquery DataTables.

Can anyone help in solving this problem?

Similar thread already exists in SO. Have a look [jquery-datatable-row-add-with-button-and-input-box](https://stackoverflow.com/questions/40644769/jquery-datatable-row-add-with-button-and-input-box) — Suprabhat Biswal, Aug 13 '18 at 12:44
thank you @SuprabhatBiswal I think that example will do the trick. — Dusan, Aug 13 '18 at 12:50

Add jQuery DataTables rows with dropdown and input field for each row on click event?

0 Answers0