How to add cleared row in table

Maxim_1

I want to add cleared row in table where I can write data.
My code:

            $('#addRow').on('click', function () {
                var partnerName = $('#partnerSelect option:selected').text();
                var categoryName = $('#categorySelect option:selected').text();
                var date = $('#myForm input[name="date"]').val();
                var reasonName = $('#reasonSelect option:selected').text();
                var description = $('#myForm textarea[name="description"]').val();
                var dateToSend = $('#myForm input[name="dateToSend"]').val();
                var howSend = $('#myForm textarea[name="howSend"]').val();
                var fromWho = $('#myForm textarea[name="fromWho"]').val();
                var toWho = $('#myForm textarea[name="toWho"]').val();
                var position = $('#myForm select[name="position"]').val();

                var newRow = table.row.add([
                    '',
                    date,
                    '',
                    partnerName,
                    categoryName,
                    reasonName,
                    fromWho,
                    description,
                    dateToSend,
                    toWho,
                    howSend,
                    position
                ]).draw(false).node();

                $(newRow).addClass('new-row');

                $(newRow).find('td').eq(3).html($('#partnerSelect').clone().attr('name', 'partnerId'));
                $(newRow).find('td').eq(4).html($('#categorySelect').clone().attr('name', 'categoryId'));
                $(newRow).find('td').eq(5).html($('#reasonSelect').clone().attr('name', 'reasonId'));
                $(newRow).find('td').eq(11).html($('#positionSelect').clone().attr('name', 'position'));

                table.cell($(newRow).find('td').eq(3)).data(partnerName);
                table.cell($(newRow).find('td').eq(4)).data(categoryName);
                table.cell($(newRow).find('td').eq(5)).data(reasonName);
                table.cell($(newRow).find('td').eq(11)).data(position);
            });

            $(document).on('click', '.save-row', function () {
                var $row = $(this).closest('tr');
                var rowData = {
                    id: '',
                    date: $row.find('input[name="date"]').val(),
                    dateToSend: $row.find('input[name="dateToSend"]').val(),
                    description: $row.find('textarea[name="description"]').val(),
                    howSend: $row.find('textarea[name="howSend"]').val(),
                    fromWho: $row.find('textarea[name="fromWho"]').val(),
                    toWho: $row.find('textarea[name="toWho"]').val(),
                    partnerId: $row.find('select[name="partnerId"]').val(),
                    categoryId: $row.find('select[name="categoryId"]').val(),
                    reasonId: $row.find('select[name="reasonId"]').val(),
                    position: $row.find('select[name="position"]').val()
                };
                $.ajax({
                    url: 'post.php',
                    type: 'POST',
                    data: rowData,
                    success: function (response) {
                        if (response.status === 'success') {
                            alert('Row saved successfully!');
                            $row.removeClass('new-row').addClass('saved-row');
                        } else {
                            alert('Error: ' + response.message);
                        }
                    },
                    error: function () {
                        alert('An error occurred: ' + (xhr.responseJSON ? xhr.responseJSON.message : xhr.statusText));
                    }
                });
            });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Maxim_1

It shows me this error
DataTables warning: table id=logbook - Requested unknown parameter 'partner' for row 20, column 3. For more information about this error, please see http://datatables.net/tn/4

allan

I don't see your DataTables initialisation there, however, I presume you are using columns.data set to partner for a column (perhaps the first column in the table).

The use of columns.data tells DataTables to expect the data fed to it to be objects. However, your use of row.add() is adding an array. Thus DataTables can't find a property called partner in the array.

You either need to consistently use object, or consistently use arrays. More information on this is available in the manual.

Allan

Maxim_1

I wrote this code and no error, bot nothing added

 $('#addRow').on('click', function () {
                console.log('Adding new row...');

                var newRowData = {
                    id: '',
                    date: '',
                    dateToSend: '',
                    description: '',
                    howSend: '',
                    fromWho: '',
                    toWho: '',
                    partnerId: '',
                    categoryId: '',
                    reasonId: '',
                    position: '',
                    partner: '',
                    category: '',
                    reason: ''
                }
                var newRow = table.row.add(newRowData).draw(false).node();

                $(newRow).addClass('new-row');

                $(newRow).find('td').eq(2).html('<input type="datetime-local" name="date" class="form-control">');
                $(newRow).find('td').eq(3).html('<input type="datetime-local" name="dateToSend" class="form-control">');
                $(newRow).find('td').eq(4).html('<textarea name="description" class="form-control"></textarea>');
                $(newRow).find('td').eq(5).html('<textarea name="howSend" class="form-control"></textarea>');
                $(newRow).find('td').eq(6).html('<textarea name="fromWho" class="form-control"></textarea>');
                $(newRow).find('td').eq(7).html('<textarea name="toWho" class="form-control"></textarea>');
                $(newRow).find('td').eq(8).html('<select name="partnerId" class="select"><option value="">Выберите контрагента</option></select>');
                $(newRow).find('td').eq(9).html('<select name="categoryId" class="select"><option value="">Выберите категорию</option></select>');
                $(newRow).find('td').eq(10).html('<select name="reasonId" class="select"><option value="">Выберите причину отключения</option></select>');
                $(newRow).find('td').eq(11).html('<select name="position" class="select"><option value="">Выберите сотрудника</option></select>');

                $(newRow).find('td').eq(8).find('select').select2();
                $(newRow).find('td').eq(9).find('select').select2();
                $(newRow).find('td').eq(10).find('select').select2();
                $(newRow).find('td').eq(11).find('select').select2();

                console.log('New row added:', newRow);
            });

            $(document).on('click', '.save-row', function () {
                console.log('Saving row...');
                var $row = $(this).closest('tr');
                var rowData = {
                    id: $row.find('input[name="id"]').val(),
                    date: $row.find('input[name="date"]').val(),
                    dateToSend: $row.find('input[name="dateToSend"]').val(),
                    description: $row.find('textarea[name="description"]').val(),
                    howSend: $row.find('textarea[name="howSend"]').val(),
                    fromWho: $row.find('textarea[name="fromWho"]').val(),
                    toWho: $row.find('textarea[name="toWho"]').val(),
                    partnerId: $row.find('select[name="partnerId"]').val(),
                    categoryId: $row.find('select[name="categoryId"]').val(),
                    reasonId: $row.find('select[name="reasonId"]').val(),
                    position: $row.find('select[name="position"]').val()
                };

Maxim_1

My imports

    <script src="vendor/components/jquery/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="vendor/datatables/datatables/media/js/jquery.dataTables.js"></script>
    <script src="vendor/select2/select2/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="/vendor/fortawesome/font-awesome/css/all.min.css">
    <script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <link href="./css/style.css" rel="stylesheet">

allan

Looks like it should work. Can you link to a test case showing the issue please? I still don't know how your DataTable is being initialised, so seeing the working page would be really useful. You can use https://live.datatables.net if you can't link to your own page.

Allan

kthorngren

Possibly the row is added to a different page, depending on how your table is sorted. See if the number of rows in the info element increases.

Kevin

Maxim_1

I can show u all my code
https://www.datatables.net/forums/uploads/editor/h8/j4jc85dro9zu.txt

kthorngren

You have server side processing enabled, ie serverSide: true. The row.add() API is only supported with client side processing. The server script is in control of what is displayed in the table rows.

Possibly you could append the row to the header for the data input. Or use a modal form like this Editor example. You might even consider using the Editor. Editor also supports inline editing like these examples.

Kevin

Maxim_1

Can't I add this row and when I click on the button in this row, save the data to the database?

colin

As Kevin said, it would be worth looking at Editor , as that makes it very easy to create HTML tables that update a database.

Colin

kthorngren

If you turn off server side processing then you can use row.add() to add the row. With server side processing enabled you will need to do something else like add append the row to the header or create a modal form.

Kevin