DataTablesに期間検索の独自関数を追加したい
発生している問題・エラーメッセージ
laravelデータテーブルのパッケージをインストールしてDataTablesの実装をしています。
基本部分は実装できましたが、独自関数がうごきません...
エラーメッセージなし
該当のソースコード
<div class="container"> <div class="row py-5 mt-4"> <table id="table-sort" class="table table-bordered table-hover bg-light border-success col-10 offset-1"> <thead> <tr class="table-active"> <th class="w-25">{{ __('問診票/予診票') }}</th> <th class="w-15">{{ __('お名前') }}</th> <th class="w-15">{{ __('生年月日') }}</th> <th class="w-25 py-1">{{ __('作成日') }}<input type="date" id="period-start" class="period-input" value="{{ $today }}"><input type="date" id="period-end" class="period-input" value="{{ $today }}"></th> <th class="w-10 text-center">{{ __('診察 ') }}<input type="checkbox" id="medical_confirm_check" value=""></th> <th class="w-10 text-center">{{ __('詳細') }}</th> </tr> </thead> </table> </div> </div> <div class="today d-none" data-today={{ $today }}></div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- DataTables --> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <!-- moment.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script> var $dataTable = $.noConflict(true); (function($) { $.fn.dataTable.ext.search.push(function(settings, data, dataIndex){ var start = $('#period-start').val(); var end = $('#period-end').val(); console.log('通過B'); var createdAt = data[3]; if( ( start == "" || end == "" ) || (moment(createdAt).isSameOrAfter(start) && moment(createdAt).isSameOrBefore(end) )){ return true; } return false; }); table = $('#table-sort').DataTable({ 'language': { // 'url': "//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json" "processing": "処理中...", "lengthMenu": "_MENU_ 件表示", "zeroRecords": "データはありません。", "info": " _TOTAL_ 件中 _START_ から _END_ まで表示", "infoEmpty": " 0 件中 0 から 0 まで表示", "infoFiltered": "(全 _MAX_ 件より抽出)", "infoPostFix": "", "search": "検索 ", "url": "", "paginate": { "first": "先頭", "previous": "<前", "next": "次>", "last": "最終" } }, processing: true, displayLength: 50, order: [[ 3, "desc" ]], searching: true, serverSide: true, ajax: '{{ route('admin.index') }}', columns: [ { data: 'sheet_title', name: 'sheet_title', className: '', orderable: false }, { data: 'name', name: 'name', className: '' }, { data: 'birthday', name: 'birthday', className: '' }, { data: 'created_at', name: 'created_at', className: '' }, { data: 'confirm', name: 'confirm', className: 'text-center', search: "診察済", orderable: false }, { data: 'show', name: 'show', className: 'text-center', orderable: false } ] }); $(function(){ var today = $('.today').data('today'); table.column(3).search(today).draw(); table.column(4).search("未診察").draw(); }); $(document).on('change', '.period-input', function() { console.log('通過A'); table.draw(); }); $(document).on("click", '#medical_confirm_check', function() { if($('#medical_confirm_check').prop('checked') == true) { table.column(4).search("診察済").draw(); } else { table.column(4).search("未診察").draw(); } }); })($dataTable); </script>
試したこと
デバッグすると'通過A'は表示されますが、'通過B'は表示されません...
よろしくお願いいたします。
あなたの回答
tips
プレビュー