datatables.min.js 有了上页 下页, 怎么显示首页尾页
                 $('.table').dataTable({
                    "bFilter": false, //过滤功能  
                    "bDestroy": true,
                    "bSort": false, //排序功能 
                    "bLengthChange": false, //改变每页显示数据数量
                    "bPaginate": true,  //开启分页功能,如果不开启,将会全部显示
                    "bProcessing": true,
                    "iDisplayLength": 2,
                    "oLanguage": {
                        "sZeroRecords": "没有找到符合条件的数据",
                        "sProcessing": "稍后...",
                        "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
                        "sInfoEmpty": "没有记录",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                        }
                    }
                });
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
datatables.min.js的使用

使用datatables.min.js对table进行分页处理, 5条一页, 首次登陆界面后台查询9条数据到前台正常显示分为2页, 后修改select控件, 再次调用后台查询到7条数据到前台, 前台报错, 如下图, 而且通过上一页下一页还是可以查询到9条数据, 这是怎么回事, 调试时也检查了后台传递过来的值是7条的.请各位大神帮忙看看, 是不是还有什么属性没有设置, 谢谢! ![图片说明](https://img-ask.csdn.net/upload/201703/15/1489563612_525968.png) ``` function GetList() { var UserName = $("#txt_keyword").val(); var selectId = $("#AccountSelect").val(); $.ajax({ type: "POST", url: "/Backstage/SystemManage/GetUserForAjax", data: { UserName: UserName, selectId: selectId }, success: function (result) { html = ""; $("#tbodyDept").html(html); if (result.State == 0 && result.Data.length > 0) { for (var i = 0; i < result.Data.length; i++) { html += "<tr>"; html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>"; html += "<td><small>" + result.Data[i].Account + "</small></td>"; html += "<td><small>" + result.Data[i].RealName + " </small></td>"; html += "</tr>"; } } $("#tbodyDept").html(html); $('.table').DataTable({ "iDisplayLength": 5, "bFilter": false, //过滤功能 "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); }, error: function () { $("#tbodyDept").html("<tr><td colspan=\"10\"><small class=\"text-warning\">查询数据出现错误!</small></td></tr>"); } }); } ``` 可能描述的不太清楚, 实现过程就是通过select控件选择重新查询数据.

datatables.min.js 重新绑定datatable的数据

使用datatables.min.js进行table的分页, 筛选后重新从后台查询数据修改table信息, 但是datatable的绑定信息没有被修改, 还是第一次的table内容, 网上找的"bDestroy": true,也没有效果, 请各位大神帮忙看看. 谢谢! ``` function GetList() { var UserName = $("#txt_keyword").val(); var selectId = $("#AccountSelect").val(); $.ajax({ type: "POST", url: "/Backstage/SystemManage/GetUserForAjax", data: { UserName: UserName, selectId: selectId }, success: function (result) { html = ""; if (selectId != -1) { //$('.table').dataTable().fnClearTable(); //将数据清除 } if (result.State == 0 && result.Data.length > 0) { for (var i = 0; i < result.Data.length; i++) { html += "<tr>"; html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>"; html += "<td><small>" + result.Data[i].Account + "</small></td>"; html += "<td><small>" + result.Data[i].RealName + " </small></td>"; html += "</tr>"; } } $("#tbodyDept").html(html); //$('.table').dataTable().fnRecordsDisplay(); //$(".table").dataTable().fnDraw(); var table = $('.table').dataTable({ "bFilter": false, //过滤功能 "bDestroy": true, "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 //"bDeferRender": true, "bPaginate": true, //开启分页功能,如果不开启,将会全部显示 "bProcessing": true, //"bInfo": true, "iDisplayLength": 5, "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); ```

jQuery.dataTables.js插件的样式问题

参考的博文: [jQuery]jQuery DataTables插件自定义Ajax分页实现 - seayxu - 博客园 http://www.cnblogs.com/seayxu/p/5513907.html 使用的后台模板: DataTables | Gentelella https://colorlib.com/polygon/gentelella/tables_dynamic.html # _就我的显示不正常_ ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998971_519569.png) 博文里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998992_800222.png) 模板里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499999007_493026.png) 我的js: //初始化表格 function initTable() { table = $("#dataTable").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //原生搜索 orderMulti: false, //多列排序 ordering : false, //排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui pagingType: "full_numbers", //分页样式:simple,simple_numbers,full,full_numbers scrollY: "500px", //滚动条 scrollCollapse: "true", columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { $.ajax({ type: "GET", url: "getData", cache: false, //禁用缓存 data: { "page" : (data.start/data.length)+1, "rows" : data.length, }, dataType: "json", success: function (result) { //封装返回数据 var returnData = {}; returnData.draw = data.draw; returnData.recordsTotal = result.totalRecords; returnData.recordsFiltered = result.totalRecords; returnData.data = result.list;//返回的数据列表 console.log(returnData); callback(returnData); } }); }, //列表表头字段 columns: columns_arr }).api(); } 我的html: <!--数据表的内容--> <div style="margin-top: 50px;"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_content"> <table id="dataTable" data-reportid="${info.id}" class="table table-striped table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> <!--/数据表的内容-->

在用jquery datatables插件的buttons扩展时,设置colvis属性问题

前端框架bootstrap3,使用mvc5 在使用jquery datatables插件的buttons扩展过程中,因为需要设置隐藏显示列的问题,使用了colvis属性, 初始化如下: buttons: [ { extend: 'colvis', text: '显示/隐藏列', columns: ':not(:last-child)', postfixButtons: [{ extend: 'colvisRestore', text: '重置' }, ] }, ] js文件导入顺序如下: jquery-3.0.0.min.js bootstrap.min.js jquery.dataTables.js dataTables.bootstrap.js dataTables.buttons.js buttons.bootstrap.js buttons.colVis.js css文件如下: bootstrap.css dataTables.bootstrap.css buttons.bootstrap.css 遇到的问题:页面生成的“显示/隐藏列”按钮,点击该按钮后弹出一下拉菜单,(内容为列集合,点击可进行隐藏或显示列),此菜单无法关闭,只能重新刷新页面才能关闭,请问怎么解决? 官网的例子:https://datatables.net/extensions/buttons/examples/column_visibility/simple.html 用的谷歌浏览器、火狐浏览器都有此问题,但官网例子则没有该现象。 请问我还需要进行什么设置?盼得到解答,谢谢!

哪个版本的datatables支持ie8?

哪个版本的datatables支持ie8?我的datatables在ie8下搜索功能无效,ie9也不行.我应该用哪个版本才能支持ie8?

Laravel - DataTables不会显示结果:“Ajax错误”和“500内部服务器错误”

<div class="post-text" itemprop="text"> <p>I'm new to <code>Laravel PHP Framework</code> and currently continue project that was left by someone. so, because of it, i try to replicate his code <strong>to create new data list using <a href="https://datatables.net/" rel="nofollow noreferrer">DataTables</a> library</strong> </p> <p>what i want to achieve is simple thing, <strong>just show data list</strong>. it's using new table. I will go advance to create other feature like <code>edit</code>, <code>details</code>, <code>action</code> etc. but currently, just to show the data list is still failed.</p> <p><strong>Error:</strong></p> <blockquote> <p><strong>DataTables warning: table id=table - Ajax error. For more information about this error, please see <a href="http://datatables.net/tn/7" rel="nofollow noreferrer">http://datatables.net/tn/7</a></strong></p> </blockquote> <p>This error appears, whenever i try to get data appear. <a href="https://i.stack.imgur.com/1p3B9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1p3B9.png" alt="enter image description here"></a></p> <p>using Chrome's developer tools not help much, i didnt get details whats wrong :</p> <p><a href="https://i.stack.imgur.com/NwO5T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NwO5T.png" alt="chrome developer tool"></a></p> <p><strong>Chrome's Developer Tools, Network Tab :</strong></p> <p><a href="https://i.stack.imgur.com/CrCaH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CrCaH.png" alt="enter image description here"></a></p> <p><strong>The Tables :</strong></p> <p><a href="https://i.stack.imgur.com/UiovR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UiovR.png" alt="enter image description here"></a></p> <p>**The View Code : **</p> <pre><code>@extends('layouts.admin.main') @section('pageTitle', 'Sodaqoh Revenue') @push('head') &lt;!-- DataTables --&gt; &lt;link href="{{ asset('plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; &lt;link href="{{ asset('plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; &lt;!-- Responsive datatable examples --&gt; &lt;link href="{{ asset('plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"&gt; @endpush @section('content') &lt;div class="row"&gt; &lt;div class="col-12"&gt; &lt;div class="card m-b-20"&gt; &lt;div class="card-body"&gt; &lt;table id="table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="5"&gt;#&lt;/th&gt; &lt;th&gt;{{ __('Name') }}&lt;/th&gt; &lt;th&gt;{{ __('Month') }}&lt;/th&gt; &lt;th&gt;{{ __('Year') }}&lt;/th&gt; &lt;th&gt;{{ __('Total') }}&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end col --&gt; &lt;/div&gt; @endsection @push('scripts') &lt;script src="{{ asset('plugins/jquery-sparkline/jquery.sparkline.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/jquery-sparkline/jquery.sparkline.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Required datatable js --&gt; &lt;script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Buttons examples --&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.buttons.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/jszip.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/pdfmake.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/vfs_fonts.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.html5.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.print.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/buttons.colVis.min.js') }}"&gt;&lt;/script&gt; &lt;!-- Responsive examples --&gt; &lt;script src="{{ asset('plugins/datatables/dataTables.responsive.min.js') }}"&gt;&lt;/script&gt; &lt;script src="{{ asset('plugins/datatables/responsive.bootstrap4.min.js') }}"&gt;&lt;/script&gt; &lt;script&gt; var oTable; oTable = $('#table').DataTable({ processing: true, serverSide: true, dom: 'lBfrtip', order: [[ 3, "asc" ]], pagingType: 'full_numbers', buttons: [ { extend: 'print', autoPrint: true, customize: function ( win ) { $(win.document.body) .css( 'padding', '2px' ) .prepend( '&lt;img src="{{ asset('assets/images/logo.png') }}" style="float:right; top:0; left:0;height: 40px;right: 10px;background: #101010;padding: 8px;border-radius: 4px" /&gt;&lt;h5 style="font-size: 9px;margin-top: 0px;"&gt;&lt;br/&gt;&lt;font style="font-size:14px;margin-top: 5px;margin-bottom:20px;"&gt; @yield('pageTitle')&lt;/font&gt;&lt;br/&gt;&lt;br/&gt;&lt;font style="font-size:8px;margin-top:15px;"&gt;{{date('Y-m-d h:i:s')}}&lt;/font&gt;&lt;/h5&gt;&lt;br/&gt;&lt;br/&gt;' ); $(win.document.body).find( 'div' ) .css( {'padding': '2px', 'text-align': 'center', 'margin-top': '-50px'} ) .prepend( '' ); $(win.document.body).find( 'table' ) .addClass( 'compact' ) .css( { 'font-size': '9px', 'padding': '2px' } ); }, title: '', orientation: 'landscape', exportOptions: {columns: ':visible'} , text: '&lt;i class="fa fa-print" data-toggle="tooltip" title="" data-original-title="Print"&gt;&lt;/i&gt;', //className: 'btn btn-primary' }, {extend: 'colvis', text: '&lt;i class="fa fa-eye" data-toggle="tooltip" title="" data-original-title="Column visible"&gt;&lt;/i&gt;'}, {extend: 'csv', text: '&lt;i class="fa fa-file-excel" data-toggle="tooltip" title="" data-original-title="Export CSV"&gt;&lt;/i&gt;'} ], //sDom: "&lt;'table-responsive fixed't&gt;&lt;'row'&lt;p i&gt;&gt; B", sPaginationType: "bootstrap", destroy: true, responsive: true, scrollCollapse: true, oLanguage: { "sLengthMenu": "_MENU_ ", "sInfo": "Showing &lt;b&gt;_START_ to _END_&lt;/b&gt; of _TOTAL_ entries" }, lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]], ajax: { url: '{!! route('sodaqoh-revenue.list-index') !!}', data: function (d) { d.range = $('input[name=drange]').val(); } }, columns: [ // { data: "rownum", name: "rownum" }, { data: "name", name: "name" }, { data: "month", name: "month" }, { data: "year", name: "year" }, { data: "total", name: "total" } ], }).on( 'processing.dt', function ( e, settings, processing ) {}); $("#table_wrapper .dt-buttons").appendTo("#table_wrapper .dataTables_length"); $('#formsearch').submit(function () { oTable.search( $('#search-table').val() ).draw(); return false; } ); oTable.page.len(25).draw(); function modalDelete(id) { swal({ title: "Are you sure?", text: "Delete this record", type: "warning", showCancelButton: !0, confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel!", confirmButtonClass: "btn btn-success", cancelButtonClass: "btn btn-danger m-l-10", buttonsStyling: !1 }).then(function() { deleteRecord(id); }, function(t) { "cancel" === t &amp;&amp; swal("Cancelled", "Your data is safe :)", "error") }) } function deleteRecord(id){ $.ajax({ url: '{{route("sodaqoh-revenue.index")}}' + "/" + id + '?' + $.param({"_token" : '{{ csrf_token() }}' }), type: 'DELETE', complete: function(data) { oTable.draw(); swal("Deleted!", "Data is successfully deleted", "success"); } }); } &lt;/script&gt; @endpush </code></pre> <p><strong>The Controller :</strong></p> <pre><code>&lt;?php namespace App\Http\Controllers\Admin; use App\DzikirPlaylistCategory; use App\DzikirPlaylist; use App\Http\Controllers\Controller; use App\SodaqohRevenue; use App\User; use DB; use Illuminate\Http\Request; use Session; class SodaqohRevenueController extends Controller { protected $rules = [ 'id' =&gt; 'required', 'name' =&gt; 'required', 'month' =&gt; 'required', 'year' =&gt; 'required', 'total' =&gt; 'required', 'point_total' =&gt; 'required', 'point_rate' =&gt; 'required', ]; public function index() { return view('admin.sodaqoh-revenue.index'); } public function listIndex(Request $request) { DB::statement(DB::raw('set @rownum=0')); $model = SodaqohRevenue::all(); $datatables = app('datatables')-&gt;of($model); // -&gt;editColumn('status', function ($model) { // return $model-&gt;getStatusLabel(); // }) // -&gt;addColumn('point', function ($model) { // return $model-&gt;userDetail ? $model-&gt;userDetail-&gt;point : 0; // }) // -&gt;addColumn('action', function ($model) { // return "&lt;a href='". route('user-apps.show', ['id' =&gt; $model-&gt;id]) ."' class='btn btn-primary btn-sm'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt;&lt;/a&gt;"; // }); return $datatables-&gt;make(true); } } </code></pre> <p><strong>The Model :</strong></p> <pre><code>&lt;?php namespace App; use Illuminate\Database\Eloquent\SoftDeletes; use Illuminate\Notifications\Notifiable; class SodaqohRevenue extends BaseModel { use SoftDeletes; const ROLE_APPS = 1; const ROLE_SUPERADMIN = 10; const STATUS_ACTIVE = 1; const STATUS_NEED_CONFIRMATION = 5; const STATUS_BLOCKED = 0; const REGISTER_TYPE_GENERAL = 1; const REGISTER_TYPE_GOOGLE = 2; const REGISTER_TYPE_FACEBOOK = 3; use Notifiable; protected $table = 'revenue'; protected $fillable = [ 'id', 'name', 'month', 'year', 'total', 'point_total', 'point_rate', ]; protected $hidden = [ 'created_by', 'updated_by' ]; public function __construct(array $attributes = array()) { parent::__construct($attributes); } public function scopeRoleMobileApp($query) { return $query-&gt;where($this-&gt;table . '.role', self::ROLE_APPS); } } </code></pre> <p><strong>The Web Route :</strong></p> <pre><code>... Route::get('/sodaqoh-revenue/list-index', ['as' =&gt; 'sodaqoh-revenue.list-index', 'uses' =&gt; 'Admin\\SodaqohRevenueController@listIndex']); Route::resource('/sodaqoh-revenue', 'Admin\\SodaqohRevenueController'); ... </code></pre> <p><strong>Laravel Log:</strong></p> <blockquote> <p><strong>[2019-07-04 21:35:56] local.ERROR: Cannot use Illuminate\Notifications\Notifiable as Notifiable because the name is already in use {"userId":1,"email":"info.zipedia@gmail.com","exception":"[object] (Symfony\Component\Debug\Exception\FatalErrorException(code: 64): Cannot use Illuminate\Notifications\Notifiable as Notifiable because the name is already in use at /Users/zulkifli/zipediaPrj/webZipedia-zul-dev@github/app/SodaqohRevenue.php:7) [stacktrace]#0 {main} "}</strong></p> </blockquote> <p>Any Idea what's wrong ? any help is appreciated.</p> </div>

我在使用datatables.net时遇到了我的DataTables问题

<div class="post-text" itemprop="text"> <p>Im Having a problem with my DataTables im using datatables.net the problem im having right now is the "Showing # to # of # entries" is not working and not counting the data that it is showing in the tables and the pagination is not working and the search bar is not functioning the "Show 10/100 entries" is not working.</p> <p>PS: I put quotation on them because i dont know what do you call them.</p> <p><strong>This is my html and ajax code</strong></p> <pre><code>&lt;div class="card card-dark"&gt; &lt;h6 class="card-header"&gt;User Status Details&lt;/h6&gt; &lt;div class="card-body"&gt; &lt;span id="message"&gt;&lt;/span&gt; &lt;div class="table-responsive"&gt; &lt;table class="table table-striped" id="table-1"&gt; &lt;/div&gt; &lt;/table&gt; &lt;script&gt; $(document).ready(function(){ load_user_data(); function load_user_data() { var action = 'fetch'; $.ajax({ url:'action', method:'POST', data:{action:action}, success:function(data) { $('#table-1').html(data); } }); } $(document).on('click', '.action', function(){ var id = $(this).data('id'); var user_status = $(this).data('user_status'); var action = 'change_status'; $('#message').html(''); if(confirm("Change User Status")) { $.ajax({ url:'action', method:'POST', data:{id:id, user_status:user_status, action:action}, success:function(data) { if(data != '') { load_user_data(); $('#message').html(data); } } }); } else { return false; } }); }); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>my action code</strong></p> <pre><code>if(isset($_POST['action'])) { if($_POST["action"] == 'fetch') { $output = ''; $query = "SELECT * FROM users WHERE user_type = 'user' ORDER BY username ASC"; $statement = $connect-&gt;prepare($query); $statement-&gt;execute(); $result = $statement-&gt;fetchAll(); $output .= ' &lt;table class="table table-striped" id="table-1"&gt; &lt;tr&gt; &lt;td&gt;ID #&lt;/td&gt; &lt;td&gt;Username&lt;/td&gt; &lt;td&gt;Status&lt;/td&gt; &lt;td&gt;Action&lt;/td&gt; &lt;/tr&gt; '; foreach($result as $row) { $status = ''; if($row["user_status"] == 'Active') { $status = '&lt;span class="badge badge-primary"&gt;Active&lt;/span&gt;'; } else { $status = '&lt;span class="badge badge-primary"&gt;Inactive&lt;/span&gt;'; } $output .= ' &lt;tr&gt; &lt;td&gt;'.$row['id'].'&lt;/td&gt; &lt;td&gt;'.$row['username'].'&lt;/td&gt; &lt;td&gt;'.$status.'&lt;/td&gt; &lt;td&gt;&lt;button type="button" name="action" class="btn btn-info btn-xs action" data-id="'.$row["id"].'" data-user_status="'.$row["user_status"].'"&gt;Action&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; '; } $output .= '&lt;/table&gt;'; echo $output; } if($_POST["action"] == 'change_status') { $status = ''; if($_POST['user_status'] == 'Active') { $status = 'Inactive'; } else { $status = 'Active'; } $query = ' UPDATE users SET user_status = :user_status WHERE id = :id '; $statement = $connect-&gt;prepare($query); $statement-&gt;execute( array( ':user_status' =&gt; $status, ':id' =&gt; $_POST['id'] ) ); $result = $statement-&gt;fetchAll(); if(isset($result)) { echo '&lt;div class="alert alert-info"&gt;User status set to &lt;strong&gt;'.$status.'&lt;/strong&gt;&lt;div&gt;'; } } } ?&gt; </code></pre> <p>I cant figure out whats missing on my code but the ajax code is working fine and the data is showing in my DataTable</p> </div>

关于Jquery DataTables 数据绑定问题

AJAX 的Success回调到后台返回的Json字符串。 如:[{"amount":2,"apply_id":1"},{"amount":3,"apply_id":2"}] 前台代码: success: function(data){ $('#table_id_example').DataTable({ //我应当怎么写,才能把data绑到Table中 }); },

我无法在printThis.js中使用bootstrap.min.css

<div class="post-text" itemprop="text"> <p>I hope someone can help me with this. I am using <code>printThis.js</code> to print a document. I have <code>bootstrap.min.css</code> located in the public folder. The thing is, I couldn't get it to work. I already tried possible answers but not working.</p> <p>Here's my code at "<code>barcode.blade.php</code>". What I wanted is to make this.</p> <p><code>loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"</code></p> <p>work. Thanks!</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="{{ asset('Admin/plugins/datatables/dataTables.bootstrap.css') }}"&gt; &lt;link rel="stylesheet" href="{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"&gt; &lt;style&gt; .row{ margin: 50px; } p{ margin-top: 10px; } &lt;/style&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; @foreach($barcodes as $barcode) &lt;div class="col-md-4"&gt; &lt;img src="data:image/png;base64,{{DNS1D::getBarcodePNG($barcode-&gt;pxbarcode, 'C128A')}}" /&gt; &lt;p&gt;{{$barcode-&gt;pxbarcode}}&lt;/p&gt; &lt;/div&gt; @endforeach &lt;/div&gt; &lt;/div&gt; &lt;div class="w3-right footer"&gt; &lt;button id="print" class="w3-button w3-blue"&gt;Print&lt;/button&gt; &lt;a href="{{url('admin/home')}}" class="btn btn-primary"&gt;Back&lt;/a&gt; &lt;/div&gt; &lt;script src="{{ asset('Admin/bower_components/jquery/dist/jquery.min.js')}}"&gt;&lt;/script&gt; &lt;script src="{{ asset('js/printThis.js')}}"&gt;&lt;/script&gt; &lt;script&gt; $('#print').click(function(){ $('.container').printThis({ debug: false, // show the iframe for debugging importCSS: true, // import parent page css importStyle: false, // import style tags printContainer: true, // print outer container/$.selector loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}", // path to additional css file - use an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove inline styles from print elements removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true printDelay: 333, // variable print delay header: "&lt;h2&gt;Print Barcode&lt;/h2&gt;", // prefix to html footer: null, // postfix to html base: false, // preserve the BASE tag or accept a string for the URL formValues: true, // preserve input/form values canvas: false, // copy canvas content doctypeString: '&lt;!DOCTYPE html&gt;', // enter a different doctype for older markup removeScripts: false, // remove script tags from print content copyTagClasses: false, // copy classes from the html &amp; body tag beforePrintEvent: null, // callback function for printEvent in iframe beforePrint: null, // function called before iframe is filled afterPrint: null // function called before iframe is removed }); }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><a href="https://i.stack.imgur.com/ebkMj.png" rel="nofollow noreferrer">This is how it looks when i click the print button.</a></p> <p>As you can see, I'm using a bootstrap in my blade and it is not taking effect when I print it.</p> </div>

为什么DataTable()。ajax.reload()无法使用ajax JSON响应自动重新加载表?

<div class="post-text" itemprop="text"> <p>I'm new in Jquery I want that once the user deletes an item(row) of table on click on "Supprimer" button I will delete it on data base the table reloads automatically without this deleted line. To do I used jQuery with DataTables:</p> <p>What is going on is once I click on "Ajouter" but it shows me this alert:</p> <blockquote> <p>DataTables warning: table id=tablebqup - Invalid JSON response. For more information about this error, please see <a href="http://datatables.net/tn/1" rel="nofollow noreferrer">http://datatables.net/tn/1</a></p> </blockquote> <p>I checked my database it was deleted but the table failed to load.</p> <p>I checked my Console and I found that :</p> <pre><code>Uncaught TypeError: Cannot set property 'data' of null at sa (datatables.min.js:48) at Sb (datatables.min.js:119) at s.&lt;anonymous&gt; (datatables.min.js:120) at s.iterator (datatables.min.js:111) at s.&lt;anonymous&gt; (datatables.min.js:120) at Object.reload (datatables.min.js:114) at Object.success (updtbq.js:69) at i (jquery-3.2.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2) at A (jquery-3.2.1.min.js:4) sa @ datatables.min.js:48 Sb @ datatables.min.js:119 (anonymous) @ datatables.min.js:120 iterator @ datatables.min.js:111 (anonymous) @ datatables.min.js:120 (anonymous) @ datatables.min.js:114 (anonymous) @ updtbq.js:69 i @ jquery-3.2.1.min.js:2 fireWith @ jquery-3.2.1.min.js:2 A @ jquery-3.2.1.min.js:4 (anonymous) @ jquery-3.2.1.min.js:4 XMLHttpRequest.send (async) send @ jquery-3.2.1.min.js:4 ajax @ jquery-3.2.1.min.js:4 r.(anonymous function) @ jquery-3.2.1.min.js:4 (anonymous) @ updtbq.js:58 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3 </code></pre> <p>I searched for the error and I found that DataTables by default, expects the data loaded to be valid JSON I have done some modification on my code but I failed to fix the error. Please can some one help for that.</p> <p>Here is my php file:</p> <pre><code>&lt;?php require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php"); $bnqs=MainController::getBanque(); echo' &lt;thead&gt; &lt;tr&gt; &lt;th style="display:none;"&gt;Id Banque&lt;/th&gt; &lt;th&gt;Nom de la banque&lt;/th&gt; &lt;th&gt;Abrev &lt;/th&gt; &lt;th&gt;Siège Sociale&lt;/th&gt; &lt;th&gt;Tel&lt;/th&gt; &lt;th&gt;Fax&lt;/th&gt; &lt;th&gt;Modifier&lt;/th&gt; &lt;th&gt;Supprimer&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;form method="post"&gt; '; $i=0; foreach ($bnqs as $bnq) { if($bnq['supr']!=1) { echo " &lt;tr&gt; &lt;td style='display:none;'&gt;".$bnq['idbc']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['nomb']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['abrvb']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['sigsocial']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['tel']."&lt;/td&gt; &lt;td contenteditable='true'&gt;".$bnq['fax']."&lt;/td&gt; &lt;td&gt; &lt;button id='modif$i' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp$i' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt;"; $i++; } } echo' &lt;/form&gt; &lt;/tbody&gt; '; </code></pre> <p>here is my jS file :</p> <pre><code>var basUrl="http://localhost/Mini_Prj/"; $(document).ready(function(e){ $('#tablebqup').dataTable(); .... $(".supp").click(function () { $choix=confirm("voulez vous vraiment sauvegarder les modifications"); if ($choix) { var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column. var nombc=($(this).parent().parent().find('td:eq(1)').html()); var abrv= ($(this).parent().parent().find('td:eq(2)').html()); var sigsoc=($(this).parent().parent().find('td:eq(3)').html()); var telf=($(this).parent().parent().find('td:eq(4)').html()); var fx=($(this).parent().parent().find('td:eq(5)').html()); console.log(id); $.post(basUrl+'views/component/updtbq.php', { action:'sup_bq', idbc:id, nomb:nombc, abrvb:abrv, sigsocial:sigsoc, tel:telf, fax:fx, }, function(data) { $("#tablebqup").DataTable().ajax.reload();//Here is my problem }); } }); ... </code></pre> <p>and here is the generated Html:</p> <pre><code>&lt;div class="updBanque"&gt; &lt;div&gt; &lt;h3&gt; Mise a jours des banques&lt;/h3&gt; &lt;div &gt; &lt;div class="table-responsive"&gt; &lt;table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover "&gt; &lt;?php include './component/tbbanqueupd.php'; ?&gt; &lt;/table&gt; &lt;form method="post"&gt; &lt;button type="button" class="btn btn-info" name="button" id="newbq" &gt;Nouvelle banque&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the response:</p> <pre><code> &lt;thead&gt; &lt;tr&gt; &lt;th style="display:none;"&gt;Id Banque&lt;/th&gt; &lt;th&gt;Nom de la banque&lt;/th&gt; &lt;th&gt;Abrev &lt;/th&gt; &lt;th&gt;Siège Sociale&lt;/th&gt; &lt;th&gt;Tel&lt;/th&gt; &lt;th&gt;Fax&lt;/th&gt; &lt;th&gt;Modifier&lt;/th&gt; &lt;th&gt;Supprimer&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;form method="post"&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;4&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE DE DÉVELOPPEMENT LOCAL&lt;/td&gt; &lt;td contenteditable='true'&gt;BDL&lt;/td&gt; &lt;td contenteditable='true'&gt;5, rue Gaci Amar, Staoueli, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 39 34 83– 033 52 15&lt;/td&gt; &lt;td contenteditable='true'&gt;021 39 37 53&lt;/td&gt; &lt;td&gt; &lt;button id='modif0' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp0' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;2&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE DE L’AGRICULTURE ET DU DÉVELOPPEMENT RURAL&lt;/td&gt; &lt;td contenteditable='true'&gt;BADR&lt;/td&gt; &lt;td contenteditable='true'&gt;17, Boulevard Colonel Amirouche, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 64 24 77– 63 38 78&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 51 46 / 64 34 44&lt;/td&gt; &lt;td&gt; &lt;button id='modif1' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp1' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;1&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE EXTÉRIEURE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;BEA&lt;/td&gt; &lt;td contenteditable='true'&gt;48, Rue des Frères Bouadou, Bir Mourad Raïs – Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;023 83 54 79&lt;/td&gt; &lt;td contenteditable='true'&gt;021 56 30 50 / 056 51 56&lt;/td&gt; &lt;td&gt; &lt;button id='modif2' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp2' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;3&lt;/td&gt; &lt;td contenteditable='true'&gt;BANQUE NATIONALE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;BNA&lt;/td&gt; &lt;td contenteditable='true'&gt;Siège Social : 8, Boulevard Ernesto Che Guevara, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt; 021 43 99 98&lt;/td&gt; &lt;td contenteditable='true'&gt; 021 43 94 94&lt;/td&gt; &lt;td&gt; &lt;button id='modif3' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp3' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;11&lt;/td&gt; &lt;td contenteditable='true'&gt;CAISSE D’ÉPARGNE ET DE PRÉVOYANCE&lt;/td&gt; &lt;td contenteditable='true'&gt;CNEP BANQUE&lt;/td&gt; &lt;td contenteditable='true'&gt;Lot n°2 Garidi, Kouba – Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;0556 64 36 99&lt;/td&gt; &lt;td contenteditable='true'&gt;021 91 64 57 et 58&lt;/td&gt; &lt;td&gt; &lt;button id='modif4' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp4' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='display:none;'&gt;5&lt;/td&gt; &lt;td contenteditable='true'&gt;CRÉDIT POPULAIRE D’ALGÉRIE&lt;/td&gt; &lt;td contenteditable='true'&gt;CPA&lt;/td&gt; &lt;td contenteditable='true'&gt;2, Boulevard Colonel Amirouche, Alger&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 57 12&lt;/td&gt; &lt;td contenteditable='true'&gt;021 63 56 98 / 63 58 83&lt;/td&gt; &lt;td&gt; &lt;button id='modif5' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id='supp5' class='btn btn-info supp' name='button'&gt;Supprimer&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/form&gt; &lt;/tbody&gt; </code></pre> </div>

如何使用PHP处理dataTable

<div class="post-text" itemprop="text"> <p>I want to have my table beautifully display with sorting options. I'm using PHP to retrieve records from a MySQL database. I learn of datatables and saw that they are pretty useful for such purpose.</p> <p>Now, the problem is whenever I use PHP to generate data from the database and dynamically display them in a table it works perfectly with all the datatables styles applying to the table, but I can't get the sorting and pagination features of dataTables to work. Here is how my table displays: <a href="https://i.stack.imgur.com/JIn4d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIn4d.png" alt="enter image description here"></a></p> <p>How do I enable the sorting and pagination features that dataTables provides? Here are the scripts to dataTables and the php code I wrote:</p> <pre><code>&lt;!-- DataTables CSS --&gt; &lt;link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet"&gt; &lt;!-- DataTables Responsive CSS --&gt; &lt;link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet"&gt; &lt;table class="table table-striped table-bordered table-hover" id="example"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Surname&lt;/th&gt; &lt;th&gt;Gender&lt;/th&gt; &lt;th&gt;Birth Date&lt;/th&gt; &lt;th&gt;Address&lt;/th&gt; &lt;th&gt;Nationality&lt;/th&gt; &lt;th&gt;County&lt;/th&gt; &lt;th&gt;Student Type&lt;/th&gt; &lt;th&gt;Class&lt;/th&gt; &lt;th colspan="3"&gt;Operations&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;?php $query = "SELECT student_id, first_name, cell_number, middle_name, surname, gender, date_of_birth, address, nationality, county, student_type, class_name from students INNER JOIN classes ON students.class_id = classes.class_id"; if($result = mysqli_query($connection, $query)){ if(mysqli_num_rows($result) &gt; 0){ while ($row = mysqli_fetch_array($result)){ ?&gt; &lt;tr&gt; &lt;td&gt;&lt;?php echo htmlentities($row['first_name']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['surname']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['gender']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['date_of_birth']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['address']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['nationality']) ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['county'])?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['student_type'])?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo htmlentities($row['class_name'])?&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="edit_student.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="create_grades.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Grades&lt;/a&gt;&lt;/td&gt; &lt;td align="center"&gt;&lt;a class="page_anchor" href="student_details.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Details&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- closing the while loop --&gt; &lt;?php }?&gt; &lt;/tbody&gt; &lt;!-- closing the if mysqli_num_rows if statement --&gt; &lt;?php } else { echo "No record found"; }?&gt; &lt;!-- closing the if $result = mysqli_query($connection, sql) if statement --&gt; &lt;?php } else { die("Database query failed. ". mysqli_error($connection)); } ?&gt; &lt;/table&gt; &lt;!-- jQuery --&gt; &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap Core JavaScript --&gt; &lt;script src="vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="vendor/datatables/js/jquery.dataTables.min.js"&gt;&lt;/script&gt; &lt;script src="vendor/datatables-responsive/dataTables.responsive.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $('#example').DataTable({ responsive: true }); }); &lt;/script&gt; </code></pre> <p>Here are the errors I'm receiving from the JS console:</p> <pre><code>Uncaught TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.m [as dataTable] (jquery.dataTables.min.js:82) at r.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166) at HTMLDocument.&lt;anonymous&gt; (index.php:429) at j (jquery.min.js:2) Uncaught TypeError: Cannot read property 'defaults' of undefined at f (dataTables.bootstrap.min.js:5) at dataTables.bootstrap.min.js:8 at dataTables.bootstrap.min.js:8 </code></pre> <p>Here is a warning that I also saw in the JS console:</p> <pre><code>jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:236) at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815) at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003) at HTMLTableElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:192) at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815) at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003) at r.fn.init.m [as dataTable] (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:82:388) at r.fn.init.h.fn.DataTable (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:166:245) at HTMLDocument.&lt;anonymous&gt; (http://localhost/SchoolMate/index.php:429:23) at j (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:29568) undefined </code></pre> </div>

jquery datatable 如何改变字体大小

各位好:目前在使用datatable 插件展示数据,但是发现默认的字体很大,没找到调整的地方 各位知道如何调整吗? 谢谢! 引入的脚本 ``` <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="dataTables/css/dataTables.jqueryui.css" /> <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/dataTables.jqueryui.js"></script> ``` 效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201606/18/1466264123_443089.jpg)

bootstrap datatables加载不出数据

``` $(document).ready(function () { var tables = $('#notice_table').DataTable({ "oLanguage": { //表格的语言设置 "sProcessing": "正在获取数据,请稍后...", "sLengthMenu": "显示 _MENU_ 条", "sZeroRecords": "没有您要搜索的内容", "sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条", "sInfoEmpty": "记录数为0", "sInfoFiltered": "(全部记录数 _MAX_ 条)", "sInfoPostFix": "", "sSearch": "搜索", "sUrl": "", "oPaginate": { "sFirst": "第一页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "最后一页" }, "bProcessing": true, //DataTables载入数据时显示‘进度’提示 // "serverSide": true, "autoWidth": false, //"sScrollY" : 350, //DataTables的高 "sPaginationType": "full_numbers", //详细分页组,可以支持直接跳转到某页 "iDisplayStart": 0,//刷新插件后显示的第几页(如果一页为10条数据,填10就显示第二页) "ajax": { "url": "/publish/json.do?publishTypeId=" + publishTypeId }, "columns": [//定义接受到的数据 { "data": "publishPerson" } ], 'bStateSave': true,//刷新页面让页面停留在之前的页码 "columnDefs": [{ "targets": 6,//编辑 "data": null,//添加编辑按钮和,删除按钮 "defaultContent": "<button id='editrow' class='btn btn-primary' type='button' style='margin-right:10px;'>编辑</button><button id='delrow' class='btn btn-primary' type='button'>删除</button>" }], "createdRow": function (row, data, index) { //每加载完一行的回调函数 $('td', row).eq(5).css('font-weight', "bold").css("color", "red");//获取到具体行具体格的元素 } } }) ``` json:![图片说明](https://img-ask.csdn.net/upload/201610/20/1476961850_893527.png) 加载不出数据,可加分

请大神帮忙看下datatables的一个错误

这是代码: ![图片说明](https://img-ask.csdn.net/upload/201507/09/1436452703_40703.png) 这是错误信息: ![图片说明](https://img-ask.csdn.net/upload/201507/09/1436452759_17774.png) 补充:数据是json类型的,用Struts2的json插件返回

ajax获取数据更新table以后,jquery.datatable的js效果失效了该怎么办呀QAQ?

用了jquery的模板表格,如果table里面放的是静态数据的话,选择展示多少条数据、搜索表格内容的功能都是正常的。 但用ajax从后台获取实际上的数据,append到tbody里面这样的形式后,就发现上面这些功能都失效了。 菜鸡学艺不精,网上的方法都试过了,都不行。 感觉好像是同步异步的问题,但不知道该怎么解决,求大佬指路QAQ。 这个是html: ``` <div class="table-responsive"> <table id="dataTable1" width="100%" class="table table-striped table-lightfont" style="font-size: 15pt"> <thead > <!-- 第二版结果展示 --> <tr> <!-- <th>ID</th> --> <th>站名</th> <th>设备名称</th> <th>电压等级</th> <th>采样时间</th> <th>相位</th> <th>最大过电压(kV)</th> </tr> <!-- ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 --> </thead> <tfoot> <!-- 第二版结果展示 --> <tr> <!-- <th>ID</th> --> <th>站名</th> </th>设备名称</th> <th>电压等级</th> <th>采样时间</th> <th>相位</th> <th>最大过电压(kV)</th> </tr> </tfoot> <tbody id="searchBody"> </tbody> </table> </div> ``` 这个是js: ``` function search() { //alert($("#station").val()) var station = $("#station").val() var start_time = $("#start_time").val() //alert(start_time.toUpperCase) var end_time = $("#end_time").val() var start_hour = $("#start_hour").val() alert(start_time.toUpperCase) var end_hour = $("#end_hour").val() var level = $("#selectLevel").val() var flag = false; //标识,表示页面上数据还未处理完成 $.ajax({ type : "get", url : "observe/search", data : $("#searchForm").serialize(), success : function(data) { /*table = $('#dataTable1').DataTable( { retrieve: true, destroy:true, paging: false } );*/ //alert("sucess!") //var length=getJsonLength(data); console.log(data) var arrData = eval(data); //alert(data[0].sampdate) var searchBody = $("#searchBody"); $("#searchBody").html(""); //var dataTable1 = $("dataTable1"); //$("#dataTable1").html(""); //var bodyInfo=""; //var tableInfo=""; if (data) { for (var i = 0; i < arrData.length; i++) { //ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 var row = “【不重要,略过】"; searchBody.append(row); //bodyInfo+=row; } flag=true; } else { alert("数据库故障或无数据!"); } } }); var loadFile; loadFile = setInterval(function() {//定时检测 if(flag) {//如果数据已经处理完毕 //loadAlljscssFile(); loadjscssfile('static/js/jquery-3.2.1.min.js', "js"); //加载你的js文件 loadjscssfile('static/bootstrap-3.3.7/css/bootstrap.min.css', "css"); //加载你的css文件 loadjscssfile('static/bootstrap-3.3.7/js/bootstrap.min.js', "js"); //加载你的js文件 loadjscssfile('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css', "css"); //加载你的js文件 loadjscssfile('bower_components/datatables.net/js/jquery.dataTables.min.js', "js"); //加载你的js文件 clearTimeout();//取消定时检测节省开销 } },50); } ```

Bootstrap dataTables“footerCallback”总和不起作用

<div class="post-text" itemprop="text"> <p>Well i can make it work in JSFiddle but not in my site. Just copied the table data from my php page and removed the for each loop and replaced with some data.<br> You can see the <a href="http://jsfiddle.net/16estcfa/" rel="nofollow">JSFiddle here</a>. </p> <p>Why cant I replicate the JSFiddle in my php page?<br> <strong>UPDATE</strong> I get in script console the following: <code>return window.wrappedJSObject || window;</code></p> <p>My php Output is this: </p> <pre><code>&lt;div&gt; &lt;table class="table table-striped table-bordered table-hover" id="myTable"&gt; &lt;div&gt;&lt;h2&gt;Mapa Analítica&lt;/h2&gt;&lt;/div&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="text-center" style="vertical-align:middle;"&gt;Name&lt;/th&gt; &lt;th class="text-center"&gt;Tipo Documento&lt;/th&gt; &lt;th class="text-center"&gt;Número&lt;/th&gt; &lt;th class="text-center"&gt;Cliente&lt;/th&gt; &lt;th class="text-center"&gt;Obra&lt;/th&gt; &lt;th class="text-center"&gt;Designação&lt;/th&gt; &lt;th class="text-center"&gt;Agregado&lt;/th&gt; &lt;th class="text-center sum"&gt;Quantidade (ton)&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt; &lt;?php foreach ($positions as $position): ?&gt; &lt;tr&gt; &lt;td class="text-center"&gt;&lt;?= $position["data"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["tipo"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["num"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["cliente"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["obra"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["nome_obra"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["agr"] ?&gt;&lt;/td&gt; &lt;td class="text-center"&gt;&lt;?= $position["ton"] ?&gt;&lt;/td&gt; &lt;/tr&gt; &lt;?php endforeach ?&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p> </p> <p>The js function located in footer.php is this: </p> <pre><code>$(document).ready(function() { $('#myTable').DataTable( { "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; // Remove the formatting to get integer data for summation var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; // Total over all pages total = api .column( '.sum' ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page pageTotal = api .column( '.sum', { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( '.sum' ).footer() ).html( '$'+pageTotal +' ( $'+ total +' total)' ); } } ); </code></pre> <p>} ); </p> <p>In the head element I included all the following: </p> <pre><code>&lt;head&gt; &lt;!-- jquery para colocar a cor vermelha no navbar --&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- BOOTSTRAP --&gt; &lt;link href="../public/css/bootstrap.min.css" rel="stylesheet"/&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt; &lt;link href="../public/css/style.css" rel="stylesheet"/&gt; &lt;script src="../public/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;!-- jquery para choosen ver: https://harvesthq.github.io/chosen/ e dataTables ver: https//www.datatables.net também para datetimepicker ver:https://eonasdan.github.io/bootstrap-datetimepicker/--&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /&gt; &lt;link rel="stylesheet" href="../public/js/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" /&gt; &lt;link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css" /&gt; &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"&gt;&lt;/script&gt; &lt;script src="../public/js/DataTables-1.10.12/media/js/jquery.dataTables.min.js"&gt;&lt;/script&gt; &lt;script src="../public/js/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"&gt;&lt;/script&gt; </code></pre> </div>

无法运行包含js文件

<div class="post-text" itemprop="text"> <p>I am running a project and need to allow the users change their own passwords. But I include the popup for my change password form at the very beginning of my php file. And include the other (.js) files at the bottom of my PHP file.</p> <p>So, when i insert the js code for my change password AJAX just after the FORM i get "undefined $" error (which means i didnt include jquery). I include my .js file at the bottom but it doesnt detect my "click" on the specified button. What did i do wrong?</p> <p>change_password.js file:</p> <pre><code>$('#change_password_submit').on('click',function() { alert('OK!'); $('#change_password_form').removeClass("has-error"); $('#change_password_confirm_form').removeClass("has-error"); if($("#change_password").val()=="" || $("#change_password").val()==" ") { $.smallBox({ title : "Failed", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Define a password.&lt;/i&gt;", color : "#C46A69", iconSmall : "fa fa-times fa-2x fadeInRight animated", timeout : 4000 }); $('#change_password_form').addClass("has-error"); return false; } if($("#change_password_confirm").val()=="" || $("#change_password_confirm").val()==" ") { $.smallBox({ title : "Failed", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Confirm your password.&lt;/i&gt;", color : "#C46A69", iconSmall : "fa fa-times fa-2x fadeInRight animated", timeout : 4000 }); $('#change_password_confirm_form').addClass("has-error"); return false; } if($("#change_password_confirm").val() != $("#change_password").val()) { $.smallBox({ title : "Failed", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Passwords does not match.&lt;/i&gt;", color : "#C46A69", iconSmall : "fa fa-times fa-2x fadeInRight animated", timeout : 4000 }); $('#change_password_confirm_form').addClass("has-error"); return false; } $.SmartMessageBox({ title : "&lt;i class='fa fa fa-spinner fa-spin txt-color-green'&gt;&lt;/i&gt; Confirmation!", content : "Do you want to edit the user?", buttons : '[No][Yes]' }, function(ButtonPressed) { if (ButtonPressed === "Yes") { $.ajax({ type: 'POST', url: 'user_func.php', data : { 'password' : $('#change_password').val(), 'password_confirm' : $('#change_password_confirm').val(), 'ajax_action' : 'change_password' }, success: function(msg) { if (msg == "no_match") { $.smallBox({ title : "Failed", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Passwords does not match.&lt;/i&gt;", color : "#C46A69", iconSmall : "fa fa-times fa-2x fadeInRight animated", timeout : 4000 }); } else { $.smallBox({ title : "Success", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Password changed successfully.&lt;/i&gt;", color : "#659265", iconSmall : "fa fa-check fa-2x fadeInRight animated", timeout : 4000 }); } } }); } if (ButtonPressed === "No") { $.smallBox({ title : "Cancelled", content : "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; &lt;i&gt;Change cancelled.&lt;/i&gt;", color : "#C46A69", iconSmall : "fa fa-times fa-2x fadeInRight animated", timeout : 4000 }); } }); }); </code></pre> <p>my change password for at the top:</p> <pre><code>&lt;div class='col-xs-12 col-sm-12'&gt; &lt;form action='noaction();' class='form-horizontal'&gt; &lt;div class='form-group' id='change_password_form'&gt; &lt;div&gt; &lt;div class='icon-addon addon-md'&gt; &lt;input type='password' id='change_password' name='change_password' placeholder='New Password' class='form-control'&gt; &lt;label class='glyphicon glyphicon-lock' title='Password'&gt;&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='form-group' id='change_password_confirm_form'&gt; &lt;div&gt; &lt;div class='icon-addon addon-md'&gt; &lt;input type='password' id='change_password_confirm' name='change_password_confirm' placeholder='Confirm Password' class='form-control'&gt; &lt;label class='glyphicon glyphicon-lock' title='Confirm Password'&gt;&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;div class='form-group'&gt; &lt;button id='change_password_submit' class='btn btn-block btn-primary change_password_submit'&gt;Submit&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and this is how i include my js file at the very bottom of the page:</p> <pre><code>&lt;!--================================================== --&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; if (!window.jQuery) { document.write('&lt;script src="js/libs/jquery-2.0.2.min.js"&gt;&lt;\/script&gt;'); } &lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script&gt; if (!window.jQuery.ui) { document.write('&lt;script src="js/libs/jquery-ui-1.10.3.min.js"&gt;&lt;\/script&gt;'); } &lt;/script&gt; &lt;!-- JS TOUCH : include this plugin for mobile drag / drop touch events &lt;script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"&gt;&lt;/script&gt; --&gt; &lt;!-- BOOTSTRAP JS --&gt; &lt;script src="js/bootstrap/bootstrap.min.js"&gt;&lt;/script&gt; &lt;!-- CUSTOM NOTIFICATION --&gt; &lt;script src="js/notification/SmartNotification.min.js"&gt;&lt;/script&gt; &lt;!-- JARVIS WIDGETS --&gt; &lt;script src="js/smartwidgets/jarvis.widget.min.js"&gt;&lt;/script&gt; &lt;!-- SPARKLINES --&gt; &lt;script src="js/plugin/sparkline/jquery.sparkline.min.js"&gt;&lt;/script&gt; &lt;!-- JQUERY SELECT2 INPUT --&gt; &lt;script src="js/plugin/select2/select2.min.js"&gt;&lt;/script&gt; &lt;!-- JQUERY UI + Bootstrap Slider --&gt; &lt;script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"&gt;&lt;/script&gt; &lt;!-- browser msie issue fix --&gt; &lt;script src="js/plugin/msie-fix/jquery.mb.browser.min.js"&gt;&lt;/script&gt; &lt;!-- FastClick: For mobile devices --&gt; &lt;script src="js/plugin/fastclick/fastclick.js"&gt;&lt;/script&gt; &lt;!-- MAIN APP JS FILE --&gt; &lt;script src="js/app.js"&gt;&lt;/script&gt; &lt;!-- PAGE RELATED PLUGIN(S) --&gt; &lt;!-- &lt;script src="js/plugin/datatables/jquery.dataTables-cust.min.js"&gt;&lt;/script&gt; &lt;script src="js/plugin/datatables/ZeroClipboard.js"&gt;&lt;/script&gt; &lt;script src="js/plugin/datatables/media/js/TableTools.min.js"&gt;&lt;/script&gt; &lt;script src="js/plugin/datatables/DT_bootstrap.js"&gt;&lt;/script&gt; &lt;script src="js/plugin/bootbox/bootbox.min.js"&gt;&lt;/script&gt; --&gt; &lt;script type="text/javascript" src="js/change_password.js"&gt;&lt;/script&gt; </code></pre> </div>

数据表未显示默认分页和搜索栏

<div class="post-text" itemprop="text"> <p>I have used datatables in other pages of my website and i tend to declare scripts in each file saperately instead declaring them in header. Other pages are showing pagination perfectly, i am having problem with this particular page only. </p> <pre><code>&lt;div class="page-wrapper"&gt; &lt;div class="container-fluid" &gt; &lt;div class="col-sm-12"&gt; &lt;div class="card"&gt; &lt;table border="0" cellpadding="5"&gt; &lt;tbody&gt;&lt;tr&gt; &lt;td&gt;Minimum age:&lt;/td&gt; &lt;td&gt;&lt;input type="text" id="min" name="min"&gt;&lt;/td&gt; &lt;td&gt;Maximum age:&lt;/td&gt; &lt;td&gt;&lt;input type="text" id="max" name="max"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div class="table-responsive" &gt; &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt; &lt;link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"&gt; &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt; &lt;table id="example" class="display" style="width:100%"&gt; &lt;thead&gt; &lt;tr&gt; //table headers &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; //table body } }else { echo "&lt;tr&gt;"; echo "&lt;td colspan='6'&gt;"; echo "&lt;h4 class='text-danger'&gt;No Data Found&lt;/h4&gt;"; echo "&lt;/td&gt;"; echo "&lt;/tr&gt;"; } ?&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script &gt; /* Custom filtering function which will search data in column four between two values */ $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { // var Row = document.getElementById("data_row"); // var Cells = Row.getElementsByTagName("td"); // var age = Cells[0].innerText; // console.log(age); // var min = document.getElementById("min").value; // var max = document.getElementById("max").value;// use data for the age column var min = parseInt( $('#min').val(), 10 ); var max = parseInt( $('#max').val(), 10 ); var age = parseFloat( data[3] ) || 0; if ( ( isNaN( min ) &amp;&amp; isNaN( max ) ) || ( isNaN( min ) &amp;&amp; age &lt;= max ) || ( min &lt;= age &amp;&amp; isNaN( max ) ) || ( min &lt;= age &amp;&amp; age &lt;= max ) ) { return true; } return false; } ); $(document).ready(function() { var table = $('#example').DataTable(); // Event listener to the two range filtering inputs to redraw on input $('#min, #max').keyup( function() { table.draw(); } ); } ); &lt;/script&gt; </code></pre> <p>Following is the error in console,</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'length' of undefined</p> <pre><code>at Ia (jquery.dataTables.min.js:24) at HTMLTableRowElement.&lt;anonymous&gt; (jquery.dataTables.min.js:17) at jquery-3.3.1.js:194 at Function.map (jquery-3.3.1.js:443) at jQuery.fn.init.map (jquery-3.3.1.js:193) at na (jquery.dataTables.min.js:16) at e (jquery.dataTables.min.js:92) at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.min.js:93) at Function.each (jquery-3.3.1.js:354) at jQuery.fn.init.each (jquery-3.3.1.js:189) </code></pre> </blockquote> <p>I referred and borrowed the source code from following sources <a href="https://datatables.net/examples/plug-ins/range_filtering.html" rel="nofollow noreferrer">https://datatables.net/examples/plug-ins/range_filtering.html</a></p> <p>It would be great if someone could tell me what am i doing wrong?</p> <p>Thank you for your suggestions</p> </div>

使用下拉列表显示2个不同的数据表

<div class="post-text" itemprop="text"> <p>I've been working with an issue on my WordPress site for a bit now but I'm stuck. I have two working datatables (both showing on top of one another on the page currently) and a dropdown selection box. I need the dropdown box, which houses 2 options (one for each table) to select one table and show only that one. </p> <p>Ideally I'd like the page to load with a default table (id="mytable") and then the dropdown can control everything from there. </p> <p>Here is the code, other than the tables themselves:</p> <pre><code>&lt;select name='tables' id='select-tables'&gt; &lt;option value="mytable"&gt;Survey Test Table&lt;/option&gt; &lt;option value="mytableSurvey"&gt;Survey Only&lt;/option&gt; &lt;/select&gt; //This is the code for the dropdown &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt; &lt;script&gt; (function($) { $('#select-tables').on('change', function(){ var table = $(this).find('option:selected'); $('#' + table).show(); $('table').not('#' + table).hide(); }); }(jQuery)); </code></pre> <p>Both tables have their own datatable script:</p> <pre><code>//datatable 1, table id is mytable &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; (function($) { $(document).ready(function(){ $('#mytable').DataTable(); $('.dataTable').wrap('&lt;div class="dataTables_scroll" /&gt;'); }); }(jQuery)); &lt;/script&gt; // table 2, table id is mytableSurvey &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; (function($) { $(document).ready(function(){ $('#mytableSurvey').DataTable(); $('.dataTable').wrap('&lt;div class="dataTables_scroll" /&gt;'); }); }(jQuery)); &lt;/script&gt; </code></pre> <p>Since this is in wordpress, I had to modify the JS for the dropdown code to match the datatable code so that it will work in WP. Is there a better way to code the dropdown with JS for existing datatables?</p> </div>

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Linux面试题(2020最新版)

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别?什么是 Linux 内核?Linux的基本组件是什么?Linux 的体系结构BASH和DOS之间的基本区别是什么?Linux 开机启动过程?Linux系统缺省的运行级别?Linux 使用的进程间通信方式?Linux 有哪些系统日志文件?Linux系统安装多个桌面环境有帮助吗?什么是交换空间?什么是root帐户什么是LILO?什...

Linux命令学习神器!命令看不懂直接给你解释!

大家都知道,Linux 系统有非常多的命令,而且每个命令又有非常多的用法,想要全部记住所有命令的所有用法,恐怕是一件不可能完成的任务。 一般情况下,我们学习一个命令时,要么直接百度去搜索它的用法,要么就直接用 man 命令去查看守冗长的帮助手册。这两个都可以实现我们的目标,但有没有更简便的方式呢? 答案是必须有的!今天给大家推荐一款有趣而实用学习神器 — kmdr,让你解锁 Linux 学习新姿势...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

史上最全的 python 基础知识汇总篇,没有比这再全面的了,建议收藏

网友们有福了,小编终于把基础篇的内容全部涉略了一遍,这是一篇关于基础知识的汇总的文章,请朋友们收下,不用客气,不过文章篇幅肯能会有点长,耐心阅读吧爬虫(七十)多进程multiproces...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

85后蒋凡:28岁实现财务自由、34岁成为阿里万亿电商帝国双掌门,他的人生底层逻辑是什么?...

蒋凡是何许人也? 2017年12月27日,在入职4年时间里,蒋凡开挂般坐上了淘宝总裁位置。 为此,时任阿里CEO张勇在任命书中力赞: 蒋凡加入阿里,始终保持创业者的冲劲,有敏锐的...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

大学一路走来,学习互联网全靠这几个网站,最终拿下了一把offer

大佬原来都是这样炼成的

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

什么时候跳槽,为什么离职,你想好了么?

都是出来打工的,多为自己着想

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

立即提问
相关内容推荐