一个完整的jQuery datatable示例

妖狐艹你老母 2022-07-11 15:26 170阅读 0赞

html代码

<div>
    	<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> u3d管理 <span class="c-gray en">></span>模型管理 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
    	<div class="pd-20">
    		<div class="text-c"> 日期范围：
    			<input type="text" οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})" id="startTime" name="startTime" class="input-text Wdate" style="width:120px;">
    			
    			<input type="text" οnfοcus="WdatePicker({minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})" id="endTime" name="endTime" class="input-text Wdate" style="width:120px;">
    			<input type="text" name="keyword" id="keyword" placeholder="商品名称" style="width:250px" class="input-text">
    			<button id="btn_search" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 搜产品</button>
    			<button id="btn_clear" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 清空</button>
    		</div>
    		<div class="mt-20">
    			<table id="productModelDg" class="table table-border table-bordered table-bg table-hover table-sort">
    				<thead>
    					<tr class="text-c">
    						<th width="40">序号</th>
    						<th width="40">商品ID</th>
    						<th width="40">模型ID</th>
    						<th>商品名称</th>
    						<th>商品列表图</th>
    						<th>模型预览图</th>
    						<th width="140">上传时间</th>
    						<th width="140">修改时间</th>
    						<th width="70">操作</th>
    					</tr>
    				</thead>
    				<tbody>
    				</tbody>
    			</table>
    		</div>
    	</div>
    </div>

js代码

<script type="text/javascript" src="${base}/static/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${base}/static/lib/layer/2.1/layer.js"></script>
    <script type="text/javascript" src="${base}/static/lib/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="${base}/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
    <script type="text/javascript" src="${base}/static/lib/unslider/unslider.min.js"></script>
    
    <script type="text/javascript">
    
    var productModelTable;
    $(document).ready(function() {
    	productModelTable = $("#productModelDg").DataTable({
    		'fnDrawCallback': function(table) {  
                $("#productModelDg_paginate").append("  到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px'> 页 
                      <a class='btn btn-default shiny' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>确认</a>");  
                var oTable = $("#productModelDg").dataTable();  
                $('#dataTable-btn').click(function(e) {  
                    if($("#changePage").val() && $("#changePage").val() > 0) {  
                        var redirectpage = $("#changePage").val() - 1;  
                    } else {  
                        var redirectpage = 0;  
                    }  
                    oTable.fnPageChange(redirectpage);  
                });  
            },
    		'bStateSave': true,
    		'serverSide': true,
    		'paging': true,
    		'autoWidth': true,
    		'lengthMenu': [10, 20, 50, 100],
    		'lengthChange': true,
    		'searching': false,
    		'ordering': false,
    		'info': true,
    		'ajax': {
    			'url': '/u3dProductModle/getProductList',
    			'type': 'POST',
    			'data': function(data) {
    				data.keyword = $.trim($('#keyword').val());
    				data.startTime = $('#startTime').val();
    				data.endTime = $('#endTime').val();
    			}
    		},
    		'columns': [
    		{
    		    'data':null
    		},{
    			'data': 'id'
    		},{
    			'data': 'modelId',
    			'render':function(data,type,row){
    				if(data==null){
    					return null;
    				}
    				return data;
    			}
    		},{
    			'data': 'name'
    		},{
    			'data': 'listPic',
    			'render': function(data, type, row) {
    				if(data!=null){
    					img = '<img src="${imageDomain}/'+data+'@200w">';
    					return img;
    				}
    				return null;
    			}
    		},{
    			'data': 'modelImg',
    			'render': function(data, type, row) {
    				if(data!=null){
    					img = '<img src="${imageDomain}/'+data+'@200w">';
    					return img;
    				}
    				return null;
    			}
    		},{
    			'data': 'createTime'
    		}, {
    			'data': 'updateTime'
    		}, {
    			'data': null
    		}],
    		'columnDefs': [{
    			'targets': [6,7],
    			'render': function(data, type, row) {
    				return dateUtil.format(new Date(data), 'yyyy-MM-dd hh:mm:ss');
    			}
    		}, {
    			'targets': -1,
    			'render': function(data, type, row) {
    				var html = '<a title="上传" href="javascript:void(0);" οnclick="upProductModel(\'' + row.id + '\')" class="ml-5" style="text-decoration:none">';
    				html += '<i class="Hui-iconfont"></i>';
    			    html += '</a>  ';
    			    html += '<a title="删除" href="javascript:void(0);" οnclick="delProductModel(\'' + row.id + '\')" class="ml-5" style="text-decoration:none">';
    				html += '<i class="Hui-iconfont"></i>';
    			    html += '</a>';
    			return html;
    			}
    		}],
    		'createdRow': function(row, data, dataIndex) {
    			$(row).addClass('text-c va-m');
    		}
    	});
    	
    	productModelTable.on('draw.dt',function() {
    		productModelTable.column(0, {
                search: 'applied',
                order: 'applied'
            }).nodes().each(function(cell, i) {
                //i 从0开始，所以这里先加1
                i = i+1;
                //服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息
                var page = productModelTable.page.info();
                //当前第几页，从0开始
                var pageno = page.page;
                //每页数据
                var length = page.length;
                //行号等于 页数*每页数据长度+行号
                var columnIndex = (i+pageno*length);
                cell.innerHTML = columnIndex;
            });
        }).draw();
    	
    	$('#btn_search').on('click', function() {
    		productModelTable.ajax.reload(); 
    	});
    	
    	$('#btn_clear').on('click', function() {
    		$('#keyword').val("");
    		$('#startTime').val("");
    		$('#endTime').val("");
    	});
    	
    });
    </script>

以上包括跳转指定页面，第一行从1开始递增。

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 Datatables + Bootstrap 完整增删改查功能实现示例

前端使用 Datatables + Bootstrap + JQuery，后台使用 SpringBoot + Mybatis 本代码旨在将 Datatables 的各个细节

分手后的思念是犯贱/ 2022年11月25日 10:07/ 0 赞/ 397 阅读

相关 jquery datatable

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的

朱雀/ 2022年08月02日 02:28/ 0 赞/ 181 阅读

相关一个完整的jQuery datatable示例

html代码 <div> <nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span cl

妖狐艹你老母/ 2022年07月11日 15:26/ 0 赞/ 171 阅读

相关 Jquery.DataTable使用

Jquery.DataTable插件使用 DataTable插件是一款基于jquery的表格插件，其官网地址为[http://datatables.net/][http_

约定不等于承诺〃/ 2022年06月13日 03:44/ 0 赞/ 212 阅读

相关一个完整的java程序示例

第一个java程序 package mypack; //相当于一个目录 public class HelloWorld

叁歲伎倆/ 2022年05月31日 11:58/ 0 赞/ 213 阅读

相关使用jquery dataTable

转自：https://www.cnblogs.com/zjoch/p/4354197.html jQuery 的插件 dataTables 是一个优秀的表格插件，提供了

水深无声/ 2022年05月27日 03:12/ 0 赞/ 210 阅读

相关 jquery的dataTable完整的前后端代码(dataTable自定义汉字显示，自定义查询条件)

最后的效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

比眉伴天荒/ 2022年03月08日 05:04/ 0 赞/ 259 阅读

相关 jQuery 完整 ajax示例

$(function(){ //请求参数 var list = {}; //

忘是亡心i/ 2022年01月13日 06:05/ 0 赞/ 265 阅读

相关 jquery dataTable

文章目录通用配置最基本用法字改成中文 ajax动态加载数据

待我称王封你为后i/ 2021年09月28日 09:20/ 0 赞/ 421 阅读

相关 jquery.datatables使用

1、DataTables错误： requested unknown parameter：使用Datatables如果配置的column字段在后台返回的json数据中缺失，那

谁借莪１个温暖的怀抱￠/ 2021年06月24日 15:59/ 0 赞/ 507 阅读