<div class="row result-div"> <div class="col-sm-12 col-md-12 col-lg-12"> <table class="table table-responsive table-bordered-gene table-hover table-border-white-2 table-bg-light-blue" id="traitMarkerDatatable"> </table> </div> </div>
function showTraitMarkerDatatables(query) { var olddataTables = jQuery("#traitMarkerDatatable>thead"); if(!isNullOrEmpty(olddataTables) && olddataTables.length>0) { jQuery("#traitMarkerDatatable").DataTable().destroy(); } var columns = [ { "title": "编号","data": "snpName","width": "13%"}, { "title": "位置","width": "15%"}, //,"data": "chr" { "title": "效果","data": "geneName","width": "13%" }, { "title": "效应","data": "riskAlle","width": "10%" }, { "title": "区间","data": "type","width": "13%" }, { "title": "频率","data": "alleFreqStr","width": "13%" }, { "title": "水平","data": "pval","width": "10%" }, { "title": "EFO","data": "efoNo","width": "13%" } ] // var data = res.data; jQuery("#traitMarkerDatatable").DataTable({ responsive: true, processing: true, serverSide: true, columns:columns, ordering: false, searching: false, paging:true, info:true, autoWidth:false, pageLength: 50, lengthMenu: [ 10, 20, 30, 50, 100 ], lengthChange:false, pagingType: "full_numbers", // scrollX: "2000px", rowCallback:function( row, data, index ) { jQuery('td',row).addClass("tr-row"); }, language: { lengthMenu: "每页 _MENU_ 条记录", info: "当前第 _START_至_END_ 条,共 _MAX_ 条 (第 _PAGE_ 页,共 _PAGES_ 页)", infoEmpty: "当前第 0至0 项结果,共 0 项", infoFiltered: "", "zeroRecords": "无满足条件数据", "processing": "处理中,请稍候...", "paginate": { "first": "首页", "previous": "上一页", "next": "下一页", "last": "末页" }, }, ajax: { "url":"#springUrl('')/rest/trait/queryTraitMarker", "type": "POST", "data": function ( d ) { return jQuery.extend({}, d, query ); } }, columnDefs: [ { "targets": [0], // "data": "traitId", "render": function(data, type, full) { return '<a class="origin-a-link" href="#" onclick="queryMarkerInfo(\''+full.snpName+'\')">'+full.snpName+'</a>'; } }, { "targets": [1], "render": function(data, type, full) { return full.chr+':'+formatNum(full.pos,0); } }, { "targets": [2], "data": "id", "render": function(data, type, full) { return '<a class="origin-a-link" href="#" onclick="queryGeneInfo(\''+full.geneName+'\')">'+full.geneName+'</a>'; } } ] }); }
相关推荐
3. **服务器端处理**:如果使用"serverSide"选项,Datatables会发送Ajax请求到指定URL,携带参数如draw、start、length和search等,以实现分页和搜索。后端需要解析这些参数并返回适当的数据集。 4. **CSS和JS文件*...
当你滚动表格或进行搜索时,datatables会自动通过Ajax请求获取更多的数据,这就是Ajax与datatables结合的强大之处。 此外,datatables的Ajax配置非常灵活,可以设置多种参数来定制请求,比如`type`(GET或POST)、`...
**jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库,用于增强HTML表格。它提供了各种高级特性,如分页、排序、过滤、搜索、数据加载以及更多,大大提升了用户体验。在这...
- 通过“fnServerData”函数配置ajax请求的详细信息,如数据类型、请求方法、URL地址、内容类型以及发送和接收数据的格式。 - 定义表格的列,对应每个数据项的字段名。 - 使用layer插件来提供简洁的用户界面,用于...
`Mvc.JQuery.Datatables`插件正是为了解决这个问题而诞生的,它通过自动处理服务器请求、数据绑定等过程,使得开发者可以快速实现与Datatables的集成,极大地减轻了开发负担,展示了国外开发者在开源工具方面的卓越...
《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件,它基于jQuery库,能够将HTML表格转化为具有高级特性的数据展示工具,如排序、搜索、分页等。"jquery.dataTables包....
这些代码片段通常会包含表格初始化、列定义、语言选项设置以及Ajax数据请求配置等部分。通过这些配置,可以实现数据的动态加载、分页以及其他交互功能。此外,还展示了如何定义表格的列,包括编号、姓名、性别等,并...
jQuery DataTables插件是一款强大的数据展示工具,专为HTML表格设计,它提供了丰富的功能,如静态分页、排序、固定表头以及AJAX事件处理,让网页中的数据管理变得简单而高效。以下是对这个插件及其相关功能的详细...
在这个"jquery datatables前后台数据交互分页实例"中,我们将探讨如何在实际项目中运用jQuery DataTables与后台进行数据交互,实现动态分页。 首先,我们需要在HTML页面中引入jQuery DataTables库。通常,这包括...
避免由于session失效,引发DataTable向后台发送ajax请求时弹窗报错而不是重定向到指定页面,详情https://blog.csdn.net/xssl_CSDN/article/details/83660015
用户在前端进行查询或删除操作时,DataTables会自动发送AJAX请求到后端,你只需处理这些请求并返回相应的结果。例如,对于删除操作,你可以添加一个新的API方法,接收ID并执行删除操作: ```csharp [HttpDelete("{...
在前端,引入jQuery和DataTables的JS及CSS资源,配置DataTables的选项。最后,编写后端Controller,处理来自DataTables的请求,返回分页和模糊查询的结果。 7. **性能优化** 在实际应用中,除了基本功能外,还需要...
综上所述,使用jQuery DataTables插件需要在后台设计一个符合规范的数据接口,并处理各种查询条件、排序和分页请求。在实现过程中,安全性和性能优化是不可忽视的关键因素。通过合理的数据处理和传输,我们可以构建...
在SSM环境中,Datatables通过Ajax请求从服务器获取数据,服务器端则使用SpringMVC来处理这些请求,MyBatis执行对应的SQL查询,最后将结果集转化为JSON格式返回给前端。 在本实例中,`readme.htm`可能包含项目的介绍...
4. **Ajax请求**:DataTables会自动发送Ajax请求到配置的URL,后端接收到请求后,根据请求参数(如排序、过滤条件)处理数据并返回。这些参数可以通过DataTables的初始化选项进行配置。 5. **自定义列和功能**:...
6. `js/main.js`:项目中的主要JS逻辑,可能包含初始化DataTables和Ajax请求的代码。 通过这个Demo,开发者可以学习到如何将jQuery DataTables的功能与Bootstrap的美观设计相结合,以实现一个既实用又美观的数据...
jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在本教程中,jQuery被用来增强用户体验,例如数据加载和交互。 DataTables.js是基于jQuery的一个插件,专门用于表格数据的高级...
jQuery的`$.ajax()`方法是进行异步数据请求的核心,它可以发送GET和POST请求,处理JSON, XML, HTML等多种数据类型。`$.get()`, `$.post()`则是其简化的版本。另外,`$.getJSON()`, `$.load()`等函数则针对特定需求。...
知识点五:前端视图中的jquery datatables配置 在前端视图中,需要通过jquery来初始化datatables插件,并配置相应的参数以实现预期的数据显示效果。这通常包括设置滚动条属性、分页样式、界面语言自定义等。通过这些...