Datatable Conflict with js

ryanseptio

can u please help me this problem.
i have a template, but if i use datatable is not working, in other template work. js problem.
thanks

allan

Sure - if you link to a test case showing the issue, per the forum rules, then I'd be happy to take a look at it.

I suspect the issue will be that you are loading jQuery twice.

Allan

ryanseptio

i think this is conflict with js 2.1.4 and js 1.12.0 error "DataTable is not a function"

@section('js')
@parent

$(document).ready(function() { var dtproyek = $('#tbl_proyek').DataTable({ "columnDefs": [ { "targets": [ 0 ], "visible": false, "searchable": false } ], "dom": '<"col-xs-12"<"pull-left"f><"pull-right"l>rt<"pull-left"i><"pull-right"p>>', "language": { "info": "Menampilkan _START_ s/d _END_ dari total _TOTAL_ proyek", "lengthMenu": "Tampilkan _MENU_ proyek", "paginate": { "first": "Halaman Awal", "last": "Halaman Akhir", "next": "Selanjutnya", "previous": "Sebelumnya" }, "search": "Cari : " }, "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ] }); $('#tbl_proyek tbody').on( 'click', 'tr', function () { var dtrow = dtproyek.row( this ).data(); return location.href = '{{ route('proyek_hasil_usaha','') }}/'+dtrow[0]; }); });

@endsection

can u please help me
thanks

ryanseptio

my template include js 2.1.4 , if i replace the js, conflict data

allan

As I said, happy to take a look at a test case.

Allan

ryanseptio

@extends('apps.template.dashboard_proyek')

@section('page_title')
SIMHU
@stop

@section('dashboard-content')
<link rel="stylesheet" type="text/css" href="{{ assets('bootstrap/bootstrap.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ assets('css/ie10-viewport-bug-workaround.css') }}">
<link rel="stylesheet" type="text/css" href="{{ assets('css/jasny-bootstrap.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ assets('datatables/media/css/jquery.dataTables.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ assets('datatables/extensions/FixedColumns/css/fixedColumns.bootstrap.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ assets('css/style.css') }}" />
<script type="text/javascript" src="{{ assets('jquery/jquery-1.12.0.min.js') }}"></script>
<script type="text/javascript" src="{{ assets('datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ assets('datatables/media/js/dataTables.bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ assets('datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js') }}"></script>
<div style="width:100%;text-align:center;padding-bottom:13px;">
<form method="POST" action="{{ route('proyek_home') }}" class="form-inline" style="display:inline-block;">
<select name="bulan" class="card-block">
@for($i = 1; $i <= 12; $i++)
@if($i == request('bulan'))
<option value="{{ $i }}" selected="selected">{{ date('M', mktime(0,0,0,$i,1)) }}</option>
@else
<option value="{{ $i }}">{{ date('M', mktime(0,0,0,$i,1)) }}</option>
@endif
@endfor
</select>
<select name="tahun" class="form-control input-sm">
@for($i = date('Y'); $i >= config('sufry.tahun_cutoff'); $i--)
@if($i == request('tahun'))
<option value="{{ $i }}" selected="selected">{{ $i }}</option>
@else
<option value="{{ $i }}">{{ $i }}</option>
@endif
@endfor
</select>
{{ csrf_field() }}
<input type="submit" value="Go" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" />
</form>
</div>
<div class="row">
<div class="col-xs-12">
<table id="tbl_proyek" class="mdl-data-table" align="center">
<thead>
<tr>
<!-- <th></th> -->
<th class="mdl-data-table__cell--non-numeric">No SPK</th>
<th class="mdl-data-table__cell--non-numeric">Proyek</th>
<th class="mdl-data-table__cell--non-numeric">Status</th>
</tr>
</thead>
<tbody>
@foreach($proyek as $row)
<tr>
<!--<td>{{ encrypt($row->proyek_id) }}</td>-->
<td class="mdl-data-table__cell--non-numeric">{{ $row->no_spk }}</td>
<td class="mdl-data-table__cell--non-numeric">{{ $row->proyek_nama_singkat }}</td>
<td class="mdl-data-table__cell--non-numeric">{{ $row->status }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection

@section('js')
    @parent
    <script type="text/javascript">
        $(document).ready(function() {

            var dtproyek = $('#tbl_proyek').DataTable({
                                "columnDefs": [
                                    {
                                        "targets": [ 0 ],
                                        "visible": false,
                                        "searchable": false
                                    }
                                ],
                                "dom": '<"col-xs-12"<"pull-left"f><"pull-right"l>rt<"pull-left"i><"pull-right"p>>',
                                "language": {
                                    "info": "Menampilkan _START_ s/d _END_ dari total _TOTAL_ proyek",
                                    "lengthMenu": "Tampilkan _MENU_ proyek",
                                    "paginate": {
                                        "first": "Halaman Awal",
                                        "last": "Halaman Akhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    },
                                    "search": "Cari : "
                                },
                                "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]
                            });

            $('#tbl_proyek tbody').on( 'click', 'tr', function () {
                var dtrow = dtproyek.row( this ).data();
                return location.href = '{{ route('proyek_hasil_usaha','') }}/'+dtrow[0];
            });
        });
    </script>

@endsection

this is my data

ryanseptio

error in

Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (http://localhost:88/proyek/proyek:1276:49)
at j (http://localhost:88/assets/js/vendor.js:13:26925)
at Object.fireWith [as resolveWith] (http://localhost:88/assets/js/vendor.js:13:27738)
at Function.ready (http://localhost:88/assets/js/vendor.js:13:29532)
at HTMLDocument.I (http://localhost:88/assets/js/vendor.js:13:29723)

allan

Please use JSFiddle, CodePen or http://live.datatables.net to post a test case.

ryanseptio

thank you allan