Nasr1
168
0
General

jquery data table generate on collapse div

Posted 1 year ago by Nasr1

Hello Awesome people , am using jquery to create data table , its working fine in a single page that show up the data , but i tried to put this data table in a collpase div so that when i collapse a div i get the data table , some thing like that :- https://imgur.com/a/0Y2Tj but as u can see from image there is no data at all , i know that the default action in jquery is click not collapse , so how i can edit my jquery so that when i press the collapse element it give me the data table , thanks in advance . @foreach ($season->CompetitionSeasonGroups as $count2 => $group)

                                    <div class="panel panel-default bx-shadow-none">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse"
                                                   data-parent="#accordion" href="#{{ $group->Id }}"
                                                  @if($count2 == 0) aria-expanded="true" @else aria-expanded="false" @endif aria-controls="collapseOne">
                                                    {{ $group->Name }}
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="{{ $group->Id }}" @if($count2 == 0) class="panel-collapse collapse in" @else class="panel-collapse collapse" @endif
                                             role="tabpanel" aria-labelledby="headingOne">
                                            <div class="panel-body">
                                                {{ $group->Id }}
                                                <style type="text/css">
                                                    .paginate_button
                                                    {
                                                        margin: 10px;
                                                    }
                                                </style>

@if(isset($message)) {{$message}} @endif

Competitions

New Competition Identification Number Name Arabic Name Number Of Teams Created At Updated At
        <tfoot style="display:none">
            <tr>
                <th>Identification Number</th>
                <th>Name</th>
                <th>Arabic Name</th>
                <th>Number Of Teams</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>

@section('scripts')

$(function(){ $('#msg').delay(2000).fadeOut(1000); });
function getUsers() {
    $('#competitionTable').dataTable({
    "processing": false,
    "responsive": true,
    "bDestroy": true,
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search",
        "sLengthMenu": "Display _MENU_ Records",
        "paginate": {
            "previous": "Previous",
            "next": "Next",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available"
        }
    },
    "ajax": {
            "url": "{{URL::route('allCompetitions')}}",
            "dataSrc": "",
    },
    columns: [
         { data: 'Id' },
         { data: 'Name' },
         { data: 'ArName' },
         { data: 'NumberOfTeams' },
         { data: 'created_at' },
         { data: 'updated_at' }
    ],
    columnDefs: [
       {
           "render": function (data, type, row) {
                return '<a href="/hub/public/players/editView/'+row['id']+'" title="Edit"><img src="{{URL::asset('assets/images/edit.png')}}" width="30px" /></a> | ' +
               '<a href="#" onclick="RemoveUser(' + row['id'] + '); return false; " title="Delete"><img src="{{URL::asset('assets/images/delete.png')}}" width="30px" /></a> | ' +
               '<a href="{{url('/')}}/competition/'+row['Id']+'" title="Show Information"><img src="{{URL::asset('assets/images/info.png')}}" width="30px"/></a>';

           }, "targets": 6
       }
    ]

});
}

$(function () {
    $('#competitionTable').on('draw.dt', function () {
        $('.footable').footable({
            breakpoints: {
                phone: 480,
                tablet: 800
            }
        });
    });
    getUsers();
});

function RemoveUser(id) {
    var chk = confirm('Sure to delete?');
    if (chk == true) {
        $('#err_Desc').html('<img src="{{URL::asset('assets/images/ellipsis.gif')}}" />').css({ 'background-color': '#171B21', 'padding': '10px' }).fadeIn(400);
        $.ajax({
                url: "{{URL::route('userDestroy')}}",
                dataSrc: "",
                data: {'id': id, 'user_id': "{{Auth::user()->id}}"},
                type:'POST',
                success: OnRequestCompleted
        });
    }
}
function OnRequestCompleted(response) {
    if (response.Status) {
        setPopup(response.Message, 'green', 1500);
    }
    else {
        setPopup(response.Message, '#DD0B0B', 1500);
    }
    $('#err_Desc').fadeOut(300);
    $('#sumbitBtn').attr('disbaled', false);
    getUsers();
}
</script>

@endsection

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.