How to update multiple checked records?

uTrx · January 2022

Want to update multiple checked rows: I extend datatables custom button and have write a function which help me to edit a single row. But my problem is i need to update multiple rows. And i dont know how to pass multiple data with this?:

kthorngren · January 2022

var rowdata = tableToQuery.row(selectedRow).data();
console.log(rowdata); //console log shows me just first record if i select multiple

Use the rows() API to fetch multiple rows. If you need the row data as a pure Javascript array use toArray().

Kevin

uTrx · January 2022

Thanks for replay. And i replace row() with rows() and this give me multiple record i select ,its okay, but now my assign button dont work. Also data cant pass on lavravel controller

also i get this error: list:1026 Uncaught TypeError: Cannot set properties of undefined (setting 'length')

kthorngren · January 2022

but now my assign button dont work

What doesn't work? Do you get errors in the browser's console?

Also data cant pass on lavravel controller

Did you try using toArray() to convert the API result from rows().data() to a Javascript array?

If you need help debugging please post a link to your page or a test case replicating the issues.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

uTrx · January 2022

i tryed in this way ** var rowdata = tableToQuery.row(selectedRow).toArray();**

and what i get on console : [Array(1)]0: [0]0: 0length: 1[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)

also this error : Uncaught TypeError: Cannot set properties of undefined (setting 'length')

kthorngren · January 2022

Here is the code supplied by @uTrx

    {
            text: 'Mass Assign &#x2934;',
            className: 'btn btn-outline-dark font-weight-bold rounded',
            action: function ( e, data, dt, node, config ) {
                var tableToQuery = $("#dataTableSnd").DataTable();
                var selectedRow = $("#dataTableSnd tr.selected");
                var rowdata = tableToQuery.row(selectedRow).data();
                console.log(rowdata); //console log shows me just first record if i select multiple
                var id = rowdata.id;
                if (id.length = 1) {
                    $('#assign_form').on('submit', function(event){
                        event.preventDefault();
                        var form_data = $(this).serialize() + "&id="+id;
                        console.log(form_data);
                        $.ajax({
                            url:"{{ route('list.assignpostdata') }}",
                            method:"POST",
                            data:form_data,
                            dataType:"json",
                            success:function(data)
                            {
                                if(data.error.length > 0)
                                {
                                    var error_html = '';
                                    for(var count = 0; count < data.error.length; count++)
                                    {
                                        error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                                    }
                                    $('#form_output').html(error_html);
                                }
                                else
                                {
                                    $('#form_output').html(data.success);
                                    $('#dataTable').DataTable().ajax.reload();
                                }
                            }
                        })
                    });

                    $('#form_output').html('');
                    $.ajax({
                        url:"{{route('list.assignfetchdata')}}",
                        method:'get',
                        data:{id:id},
                        dataType:'json',
                        success:function(data)
                        {
                            $('#assign').val(data.assign);

                            $('#id').val(id);
                            $('#assignModal').modal('show');
                            $('#action_assign').val('OK');
                            $("#action_assign").click(function(){
                                    $("#assignModal").modal('hide');
                                });
                            $('.modal-title').text('Edit Data');
                            $('#button_action_assign').val('assign');
                        }
                    })
                }
            }
            },

kthorngren · January 2022

Please use Markdown formatting as noted in the Leave a Comment box:

Posts are formatted using Markdown. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

Uncaught TypeError: Cannot set properties of undefined (setting 'length')

Looks like the error is here:

            var id = rowdata.id;
            if (id.length = 1) {

If rowData is na array then you will need to use a Javascript loop to loop through the array.

If you use var rowdata = tableToQuery.row(selectedRow).toArray(); the row() API will return only one row. You don't need toArray(). My suggestion above is to do something like this for multiple rows:

var rowdata = tableToQuery.rows(selectedRow).data().toArray();

It uses rows().data() to return an array of rows. This actually returns an API instance. So if you need pure Javascript then chain toArray().

Kevin

uTrx · January 2022

You are right

var rowdata = tableToQuery.rows(selectedRow).data().toArray();

now i get multiple value on my console.log

but when i hit submit on modal i get this error

array:4 [ "_token" => "nQ2CSvZTLMXqUbZwTmwatRbV8xBdwb6buq5bWn3N" "assign" => "8" "id" => "undefined" "button_action_assign" => "assign" ]

as i use console.log(form_data) or in laravel dd($request->all).
So i can get multiple rows but i cant pass this rows on laravel controller

url:"{{ route('list.assignpostdata') }}", method:"POST", data:form_data, console.log(form_data)

uTrx · January 2022

var rowdata = tableToQuery.rows(selectedRow).data().toArray();
You are right this fix the problem

But now when i hit submit on modal i get "id" => "undefined"

url:"{{ route('list.assignpostdata') }}", method:"POST", data:form_data, console.log(form_data) //if i do console log here and hit submit

uTrx · January 2022

var rowdata = tableToQuery.rows(selectedRow).data().toArray();

You are right this fix the problem

But now when i hit submit on modal i get "id" => "undefined"

url:"{{ route('list.assignpostdata') }}",
                        method:"POST",
                        data:form_data,
                        console.log(form_data) //if i do console log here and hit submit

kthorngren · January 2022

Seems like a console.log statement on line 4 if your code snippet will cause a syntax error. Sounds like you are trying to use one id from an array of one or more ids. Are you looping through all the rows?

Please post a link to your page or a running test case showing the issue if you want help debugging the code. This way we can see what is happening and can offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

uTrx · January 2022

{
                text: 'Mass Assign &#x2934;',
                className: 'btn btn-outline-dark font-weight-bold rounded mx-2',
                action: function ( e, data, dt, node, config ) {
                    var tableToQuery = $("#dataTable").DataTable();
                    var selectedRow = $("#dataTable tr.selected");
                    var rowdata = tableToQuery.rows(selectedRow).data().toArray();
                    console.log(rowdata); 
                    var id = rowdata.id;
                    console.log(id); // this gives **_undefined_** on console log
                    if (id.length == 1) {

                        $('#assign_form').on('submit', function(event){
                            event.preventDefault();
                            var form_data = $(this).serialize() + "&id="+id;
                            console.log(form_data);
                            $.ajax({
                                url:"{{ route('view.postdata') }}",
                                method:"POST",
                                data:form_data,
                                dataType:"json",
                                success:function(data)
                                {
                                    if(data.error.length > 0)
                                    {
                                        var error_html = '';
                                        for(var count = 0; count < data.error.length; count++)
                                        {
                                            error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                                        }
                                        $('#form_output').html(error_html);
                                    }
                                    else
                                    {
                                        $('#form_output').html(data.success);
                                        $('#dataTable').DataTable().ajax.reload();
                                    }
                                }
                            })
                        });

                        $('#form_output').html('');
                        $.ajax({
                            url:"{{route('view.fetchdata')}}",
                            method:'get',
                            data:{id:id},
                            dataType:'json',
                            success:function(data)
                            {
                                $('#assign').val(data.assign);

                                $('#id').val(id);
                                $('#assignModal').modal('show');
                                $('#action_assign').val('OK');
                                $("#action_assign").click(function(){
                                        $("#assignModal").modal('hide');
                                    });
                                $('.modal-title').text('Edit Data');
                                $('#button_action_assign').val('assign');
                            }
                        })
                    }
                }
            },

This is all script i use. I dont now how to display all this code on live example

iam getting this error now on console: Uncaught TypeError: Cannot read properties of undefined (reading 'length')

kthorngren · January 2022

var id = rowdata.id;

This is the statement causing the error. You are now getting an array of one or more rows, not a single object. You will need to loop through the array to get the ids. See this SO thread for options.

Kevin

colin · January 2022

It would be worth looking at Editor - as that supports multiple edits.

Colin

uTrx · January 2022

@kthorngren please can you do an example for my case, i dont understand how to use loop in this case

kthorngren · January 2022

The question is what are you trying to do? Looks like you are trying to open a form but do mass edits. Without knowing what your solution requirements are it would be difficult to provide the correct solution. However this is one way to loop through the array:

for (i=0; i<rowData.length; i++) {
  var id = rowdata[i].id;  // Get the id of the array element
  console.log(id); // this gives **_undefined_** on console log
..... // The rest of your code
} // End for loop

This may or may not be what you want. As Colin said the Editor will support this for you.

Kevin

uTrx · January 2022

@kthorngren this helps me. But why can i edit just last record. For example if i select row with id 1 and row with id 2 if i hit submit i can edit just row with id 2

kthorngren · January 2022

Help with development of your application is beyond the scope of this forum. If you have specific Datatables questions we are glad to help. A forum like Stack Overflow is more appropriate for how to build your Javascript application and handle your forms.

Kevin

How to update multiple checked records?

How to update multiple checked records?

Answers

Howdy, Stranger!

Categories

DataTables

How to update multiple checked records?

How to update multiple checked records?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables