remove suddenly added colspan with responsive size

JL_kor

hello i've already posted on stackoverflow... but i tried to remove colspan...it won't any help..
Before drag to adjust window size

<table>
# + 1
# + 2
# + 3
# + 4
</table>
After

<table>
# +            1 (colspan="1~5")  has dynamically added when i dragged window width below 1024 px
# + 2
# + 3
# + 4
</table>

then how to remove this colspan="" in this code ? i've already tried this createdRow function but it wasn't help at all.

Javascript

table = $('#table').dataTable(
        {
            "processing": true,
            "serverSide": true,
            "autoWidth" : true,
            "searching": false,
            "lengthChange": false,
            "pageLength": 100,
            ajax: {
                url: "/energy/",
                type: "GET"
            },
            createdRow : function(row, data, dataIndex){
                if(data[0]=="1"){
                    $('td:eq(0)', row).attr('colspan', 0);
                    this.api().cell($('td:eq(0)', row))
                }
            },

view.html

<div class="card-wrapper collapse show">
    <div class="card-body q-chart-height" >
       <table class="table table-striped table-hover responsive nowrap my-4 w-100" id="table">
            <thead>
               <tr>
                  <th>#</th>
                  <th>Name </th>
                  <th>Max</th>
                  <th>Total</th>
                  <th>Power</th>
                  <th>Rank</th>
               </tr>
            </thead>
            <tbody></tbody>
         </table>
   </div>
</div>

please help here..

colin

DataTables doesn't support colspan in the table's body - see here.

Colin

JL_kor

@colin

Thanks for reply..

i know i saw documents regarding datatables doesn't support colspan. but i don't understand why it suddenly colspan came out!

colin

If it's not supported, it'll do unexpected things, I'm afraid.

Colin

JL_kor

@colin

i understand what you mention about. but as you see in my code there's nothing had chance to write a 'colspan'. cuz it generates dynamically. overtheless i have to remove this colspan.. for clear view. has any advice through css workout? or script

colin

I'm not understanding what you're saying. There's a colspan in your tr, which isn't supported. You're adding it in, and as it's there, you'll see unexpected behaviour.

Colin

JL_kor

@colin

you mean, i added colspan on my own and it turns to unexpected behavior?
as you see the code above , i 've never added colspan. on the table tag. it generated automatically.

createdRow function is my workout to give a colspan to 0. originally it was not exsist. it happens same without this function.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kimsojung

Hello. I'm leaving a comment because I found the same phenomenon. Have you solved the problem? If you have solved it, could you share the method?

colin

If you can post a test case that demonstrates the issue, we're happy to take a look,

Colin

kimsojung

Thank you so much!!! I'm outside right now, so I'll post the example tomorrow and comment again.

kimsojung

@colin
I couldn't create a test case, so I posted a question post with a detailed description!

URL : http://mail.datatables.net/forums/discussion/65423/suddenly-added-colspan-when-adjusting-to-mobile-screen/p1?new=1

colin

Thanks, please see my comment on that thread.

Colin

uday9405

@colin

If you say that colspan is not supported in tbody, why do the examples for rowGroup use that?

https://datatables.net/extensions/rowgroup/examples/initialisation/customRow.html

Am I missing anything?

colin

colspan isn't supported for the table's data - as it affects the ordering and searching. RowGroup is different, since that's applied onto the table and isn't effected by those operations.

Colin

neiellcare71

"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,

one of these might be wrong on ajax.
mine was working fine again after fixing this