admin 插件资讯 2022-12-28

jQuery插件datatables的用法及如何实现分页代码详解

首页 > 开发

jQuery插件datatables的用法及如何实现分页代码详解 Posted on 11/14/2022 | by liu

web前端|js教程 jQuery插件datatables的用法及如何实现分页代码详解

datatables,jQuery,如何web前端-js教程

DataTables是一个jQuery的表格插件。

html5手机棋牌游戏源码,ubuntu14 搜狗,网络爬虫爬论文,菠菜php,松溪seo介绍lzw

实例讲解

建站代理平台源码,vscode变量高亮问题,ubuntu应用目录,本地跑tomcat,sqlite能远程连接吗,前端大数据可视化框架免费,爬虫在金融分析中的应用,php页面测试,浙江seo站内优化,网站后台验证码不显示,网页下单网站源码,win8 metro风格网站后台管理模板lzw

1、需求：下图例，对datatables的内容进行添加，编辑，删除的操作。

计费源码,ubuntu怎么回到代码,安卓新闻爬虫,mui和php,丰都seo外包lzw

2、分析：添加功能—单击add按钮，弹出对话框，添加新的内容。编辑功能—单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。删除功能—单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。3、编码：Attributes//名称

//声明jquery datatables Name Value DisplayOrder …..//datatables内容，此处省略 //添加按钮 //编辑按钮 //删除按钮

//声明dialog,异步更新 @using (Ajax.BeginForm(“Update”, “Product”, new AjaxOptions { UpdateTargetId = “d_Attributes”, OnSuccess = “dialogClose”, HttpMethod = “Post”, })) {

Name * Value * DisplayOrder * }

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，

；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码： function dialogClose() { $(“#e_Attributes”).dialog(“close”); } $(“#e_Attributes”).dialog({ modal: true, autoOpen: false, show: { effect: “blind”, duration: 1000 }, hide: { effect: “explode”, duration: 1000 }, width: 400 }); var editor; $(function () { //声明datatable $(“#gridtable”).dataTable().fnDestroy(); editor = $(‘#gridtable’).dataTable({ “bInfo”:false, “bServerSide”: false, ‘bPaginate’: false, //是否分页。 “bProcessing”: false, //当datatable获取数据时候是否显示正在处理提示信息。 ‘bFilter’: false, //是否使用内置的过滤功能。 ‘bLengthChange’: false, //是否允许用户自定义每页显示条数。 ‘sPaginationType’: ‘full_numbers’, //分页样式 }); //单击，赋值，改样式 $(“#gridtable tbody tr”).click(function (e) { if ($(this).hasClass(‘row_selected’)) { $(this).removeClass(‘row_selected’); putNullValue() } else { editor.$(‘tr.row_selected’).removeClass(‘row_selected’); $(this).addClass(‘row_selected’); var aData = editor.fnGetData(this); if (null != aData) { putValue(aData); } } }); //双击 $(“#gridtable tbody tr”).dblclick(function () { if ($(this).hasClass(‘row_selected’)) { //$(this).removeClass(‘row_selected’); } else { editor.$(‘tr.row_selected’).removeClass(‘row_selected’); $(this).addClass(‘row_selected’); } var aData = editor.fnGetData(this); if (null != aData) { putValue(aData); } $(“#hiddenValue”).val(“edit”); $(“#e_Attributes”).dialog(“open”); }); //添加 $(“#add”).click(function () { editor.$(‘tr.row_selected’).removeClass(‘row_selected’); putNullValue(); $(“#hiddenValue”).val(“add”); $(“#e_Attributes”).dialog(“open”); }); //编辑 $(“#edit”).click(function () { var productAttributeID = $(“#productAttributeID”).val(); if (productAttributeID != “” && productAttributeID != null) { $(“#hiddenValue”).val(“edit”); $(“#e_Attributes”).dialog(“open”); } }); //删除 $(“#delete”).click(function () { var productAttributeID = $(“#productAttributeID”).val(); var productID = $(“#productID”).val(); if (productAttributeID != null && productAttributeID != “”) { if (confirm(“Delete?”)) { $.ajax({ type: “GET”, url: “@Url.Action(“DeleteAttribute”, “Product”)”, data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 dataType: “html”, cache: false, success: function (result) { $(“#d_Attributes”).html(result); $(“#productAttributeID”).val(null); } }); } } }); //赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了） function putNullValue() { 。。。。。。／／此处省略 } //赋值 function putValue(aData) { 。。。。。。//此处省略 } }); $.ajaxSetup({ cache: false });

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。

4、分页实现

引入CSS文件和JS文件

@import “DataTables-1.8.1/media/css/demo_page.css”; @import “DataTables-1.8.1/media/css/demo_table.css”; @import “DataTables-1.8.1/media/css/demo_table_jui.css”; ————————————————————————– ———–最简单的方式： $(document).ready(function() { $(“#example”).dataTable(); }); ———-也可以自己定义各属性： $(document).ready(function() { $(“#example”).dataTable({ // “bPaginate”: true, //开关，是否显示分页器 // “bInfo”: true, //开关，是否显示表格的一些信息 // “bFilter”: true, //开关，是否启用客户端过滤器 // “sDom”: “lfrtip”, // “bAutoWith”: false, // “bDeferRender”: false, // “bJQueryUI”: false, //开关，是否启用JQueryUI风格 // “bLengthChange”: true, //开关，是否显示每页大小的下拉框 // “bProcessing”: true, // “bScrollInfinite”: false, // “sScrollY”: “800px”, //是否开启垂直滚动，以及指定滚动区域大小,可设值：’disabled’,’2000px’ // “bSort”: true, //开关，是否启用各列具有按列排序的功能 // “bSortClasses”: true, // “bStateSave”: false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ——当值为true时aoColumnDefs不能隐藏列 // “sScrollX”: “50%”, //是否开启水平滚动，以及指定滚动区域大小,可设值：’disabled’,’2000%’ // “aaSorting”: [[0, “asc”]], // “aoColumnDefs”: [{ “bVisible”: false, “aTargets”: [0]}]//隐藏列 // “sDom”: ‘t’, “bAutoWidth”: false, //自适应宽度 “aaSorting”: [[1, “asc”]], “sPaginationType”: “full_numbers”, “oLanguage”: { “sProcessing”: “正在加载中……”, “sLengthMenu”: “每页显示 _MENU_ 条记录”, “sZeroRecords”: “对不起，查询不到相关数据！”, “sEmptyTable”: “表中无数据存在！”, “sInfo”: “当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录”, “sInfoFiltered”: “数据表中共为 _MAX_ 条记录”, “sSearch”: “搜索”, “oPaginate”: { “sFirst”: “首页”, “sPrevious”: “上一页”, “sNext”: “下一页”, “sLast”: “末页” } } //多语言配置 }); });

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

Rendering engine Browser Platform(s) Engine version CSS grade Trident Internet Explorer 4.0 Win 95+ 4 X

如果没有 thead 将会报错。

bPaginate: 是否分页，默认为 true，分页

iDisplayLength : 每页的行数，每页默认数量:10

sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。

bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。

bFilter: 启用或禁止数据过滤，默认为 true。注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom

bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。

/* * Example init */$(document).ready(function(){ $(‘#example’).dataTable();}); 相关文章 JavaScript使ifram跨域相互访问及与PHP通信的实例【javascript】 Node.js开发之访问Redis数据库教程【node.js】 JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)【javascript】 jQuery学习笔记之jQuery的事件【jquery】 PHP实现的线索二叉树及二叉树遍历方法详解【PHP】 PHP 反射机制实现动态代理的代码【PHP】获取各个地区的学校（大学，高中，技校，初中） OurSQL Episode 187: Hanging Out【MySQL】初学者重装mysql出现的问题【MySQL】 Lore Article.PHP SQL注入漏洞 utf-8-mysql 找错，能够更新其他字段，只有describe更新失败 Yii 2和Laravel 5，哪个更适合企业/团队使用？特别推荐 JavaScript使ifram跨域相互访问及与PHP通信的实例【javascript】