How to add cleared row in table

How to add cleared row in table

Maxim_1Maxim_1 Posts: 15Questions: 5Answers: 1
edited November 2023 in Free community support

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.

Replies

  • Maxim_1Maxim_1 Posts: 15Questions: 5Answers: 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

  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

    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_1Maxim_1 Posts: 15Questions: 5Answers: 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_1Maxim_1 Posts: 15Questions: 5Answers: 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">
    
  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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_1Maxim_1 Posts: 15Questions: 5Answers: 1
    edited November 2023
  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    edited November 2023

    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_1Maxim_1 Posts: 15Questions: 5Answers: 1

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

  • colincolin Posts: 15,202Questions: 1Answers: 2,592

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

Sign In or Register to comment.