基于jquery的表格排序


Posted in Javascript onSeptember 11, 2010

很多高手也位jquery写了专门的排序库,因为自己也想尝试一下,
当然运行速度实在不能接受,但是我会慢慢的把他改进的。
注:这里只是拿出了一部分代码来,查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.

5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为
sortStr();
它有两个参数:

function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
}

第一个是index,它是在click事件中获得的变量,这个变量包含了被点击的那个'th'的在文档中的位置是一个数字,
jquert的index()方法获得对象的位置,这个位置从0算起,这个例子中有6个'th';

第二个参数是dataType,他包含每个'th'的属性值。

sortStr()里面包含了一个比较的函数,这个函数是匿名函数,它有2个参数每个参数代表着一个'tbody tr',(在这里a和b代表需要比较的tr)这两个参数是在包含他的函数环境中获取的,sort()方法里面的参数,在这是一个函数,这个函数都会获得数组对象的元素,
这个匿名函数返回对操作数组的引用。
arr里面包含的一个数组,每个数组的值包含对tbody里面的tr的引用,排序函数按照返回的值对原有数组里面的元素直接进行位置的改变,

var aText=$(a).find('td:nth-child('+index+')').text();
获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值,
click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置;

if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
}

如果需要排序的类型是不包含了数字和字母的话,(因为拥有roomType值的元素所包含了数字和字母),将获得的td里面的文本值和dataType传递到
Parse()里面进行转换,
function Parse(data,dataType){ 
switch(dataType){ 
case 'num': 
return parseFloat(data)||0 
case 'date': 
return Date.parse(data)||0 
default : 
return splitStr(data) 
} 
}

如果是数字类型直接转换为浮点数,

return parseFloat(data)||0
要是出现了布恩那个转换的对象字符串那么返回0;因为这个文档里面有一个NaN这个是无法转换的,所以返回的是0;

如果是日期类型可以用Date.parse直接转换为数字,这个转换是从1970年到转换参数的时间,
这个时间转换我试了试可以精确到秒的,比如说1971/01/2 18:12:20、01/2/1970 18:12:20写法都可以转换;
之后

return aText>;bText?-1:bText>;aText?1:0;
返回比较值aText比bText大返回一个小于0的任何数字都可以,相反返回一个正数,如果都不是的话返回0;如果不是日期也不是数字(在这个文档中目前只能转换3中数据:1.日期。2.数字。3.字符串和数字一起的),
default :
return splitStr(data)
我把他放到splitStr()里面进行转换

splitStr()的内容如下:

function splitStr(data){ 
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
data=data.replace(re,'$1') 
return parseFloat(data) 
}

正则表达式:分为三部分 1部分^[a-zA-Z ]*;中间部分(.*?);结尾部分[a-zA-Z ]*$
可以这样看/ /是包含块 ,
第一部分 ^表示目标字符串开头,[]之间表示A-Z无论大小写都被忽略掉,里面还有个空格,*表示它左边[]里面的内容可以出现任意次数;
中间部分 ()是个分组 ,分组内容会被放置到RegExp的第一项中'$1′,'.'匹配所有(除了空格)*?懒惰方式;
最后部分 []之间与后面的*和第一部分是一样的都是去掉字母,$表示结尾部分;
\$表示匹配$号
function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); 
if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
}

否则 直接使用localeCompare进行比较,这个是专门对字符串进行比较的方法,如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数,负数和0;

代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的,这个时间会在最中间那个'th'的'span'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。

完整的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>表格排序</title> 
<script src="../jquery1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript"> $(function(){ 
$('th').click(function(){ 
var date1=(new Date()).getTime() 
var dataType=$(this).attr('dataType'); 
var index=$('th').index(this)+1; 
var arr=[]; 
var row=$('tbody tr'); 
$.each(row,function(i){ arr[i]=row[i] }) 
if($(this).hasClass('select')){ 
arr.reverse() 
} 
else { 
arr.sort(sortStr(index,dataType)) 
$('.select').removeClass(); 
$('td:nth-child('+index+')').addClass('select'); 
$(this).addClass('select') 
} 
var fragment=document.createDocumentFragment() 
$.each(arr,function(i){ 
fragment.appendChild(arr[i]) 
}) 
// $('tbody').remove(); 
//$('table').append('<tbody></tbody>') 
//Each(arr,function(o){fragment.appendChild(o)}) 
$('tbody').append(fragment) 
var date2=(new Date()).getTime() 
$('th span').text(date2-date1) 
}) 
}) 
function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); 
if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>bText?-1:bText>aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
} 
function Parse(data,dataType){ 
switch(dataType){ 
case 'num': 
return parseFloat(data)||0 
case 'date': 
return Date.parse(data)||0 
default : 
return splitStr(data) 
} 
} 
function splitStr(data){ 
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
data=data.replace(re,'$1') 
return parseFloat(data) 
} 
//web开发交流blog 文档来源 www.mymickey.org 作者 mickey 
//转载请注明来源 
</script> 
<style type="text/css"> 
table { 
text-align:center; 
border:1px #ccc solid; 
border-collapse:collapse; 
width:700px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 
} 
tr { 
border-bottom:1px #ccc solid; 
} 
td { 
padding:.3em 0 .3em 0; 
} 
th { 
cursor:pointer; 
background:url(room-bg.gif) 0 -13px repeat-x; 
height:30px; 
color:#009; 
} 
td.select { 
color:#000; 
} 
th.select { 
background-image:none; 
background-color:#C4D5D9; 
} 
span { 
} 
</style> 
</head> 
<body> 
<a href="http://www.mymickey.org" style="font-size:14px; color:#F60">返回文章</a> 
<table> 
<thead> 
<tr> 
<th dataType="roomNum">房号</th> 
<th dataType="date">日期</th> 
<th dataType="roomType">房间类型<span></span></th> 
<th dataType="num">床位</th> 
<th dataType="container">容量</th> 
<th dataType="Float">价格/晚</th> 
<th dataType="Float">合计</th> 
</tr> 
</thead> 
<tbody> 
<tr > 
<td>u0628</td> 
<td >9/14/2008</td> 
<td >Std Hotel Room 2 Double (27 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td>u0631</td> 
<td >10/4/2008</td> 
<td >Lodge Rm/Shared Bath Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td >u0636</td> 
<td >9/18/2008</td> 
<td >Std Hotel Room Q (34 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$117.00</td> 
<td >$466.00</td> 
</tr> 
<tr > 
<td>u0638</td> 
<td >9/19/2008</td> 
<td >Std Hotel Room 2 Q (28 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$117.00</td> 
<td>$466.00</td> 
</tr> 
<tr > 
<td>u0612</td> 
<td >9/1/2008</td> 
<td >Studio Condo (10 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0626</td> 
<td >9/13/2008</td> 
<td >Hotel Jr Suite K (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0641</td> 
<td >9/22/2008</td> 
<td >Hotel Superior K (26 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0602</td> 
<td >8/31/2008</td> 
<td >1 Bdrm Condo K (96 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0616</td> 
<td >10/8/2008</td> 
<td >Studio Condo Murphy (5 left)</td> 
<td >NaN</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0623</td> 
<td >10/2/2008</td> 
<td >Studio Cabin Q (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0633</td> 
<td >9/16/2008</td> 
<td >Studio Q/Murphy (6 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0637</td> 
<td >10/5/2008</td> 
<td >Lodge Room Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0622</td> 
<td >9/11/2008</td> 
<td >Hotel Loft Ste K/Q (3 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0629</td> 
<td >10/10/2008</td> 
<td >1 Bdrm Condo K (76 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0603</td> 
<td >9/8/2008</td> 
<td >Hotel Loft K/Q (16 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0632</td> 
<td >9/15/2008</td> 
<td >Hotel Loft K/2T (15 left)</td> 
<td >3</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0619</td> 
<td >10/1/2008</td> 
<td >Studio Cabin Firepl K (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$209.00</td> 
<td>$836.00</td> 
</tr> 
<tr > 
<td>u0608</td> 
<td >10/7/2008</td> 
<td >1 Bdrm Condo with Den K (1 left)</td> 
<td >1</td> 
<td >6 人</td> 
<td >$222.00</td> 
<td>$886.00</td> 
</tr> 
<tr > 
<td>u0620</td> 
<td >9/5/2008</td> 
<td >2 Bdrm Condo K/K (25 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0630</td> 
<td >9/7/2008</td> 
<td >2 Bdrm Condo K/2T (57 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0634</td> 
<td >10/11/2008</td> 
<td >2 Bdrm Condo K/Q (88 left)</td> 
<td>2</td> 
<td>6 人</td> 
<td>$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0639</td> 
<td >9/20/2008</td> 
<td >1 Bdrm K/Murphy (19 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0614</td> 
<td >9/2/2008</td> 
<td >2 Bdrm Townhome (7 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$239.00</td> 
<td>$956.00</td> 
</tr> 
<tr > 
<td>u0610</td> 
<td >9/10/2008</td> 
<td >1 Bdrm Loft K/Q+2T/Murphy (5 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0625</td> 
<td >9/12/2008</td> 
<td >2 Bdrm K/Q/Murphy (6 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0640</td> 
<td >9/21/2008</td> 
<td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0606</td> 
<td >9/26/2008</td> 
<td >2 Bdrm Cabin K/Q+T (2 left)</td> 
<td >3</td> 
<td >5 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0613</td> 
<td >9/29/2008</td> 
<td >Lodge 2 Bdrm Suite Q/Q (1 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0624</td> 
<td >10/3/2008</td> 
<td >1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0618</td> 
<td >9/4/2008</td> 
<td >2 Bdrm Condo w/Den Custom (1 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$329.00</td> 
<td>$1316.00</td> 
</tr> 
<tr > 
<td>u0627</td> 
<td >10/9/2008</td> 
<td >3 Bdrm Condo K/Q/Q (6 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0642</td> 
<td >9/23/2008</td> 
<td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td> 
<td >3</td> 
<td >7 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0615</td> 
<td >9/3/2008</td> 
<td >3 Bdrm Condo K/Q/2T (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$379.00</td> 
<td>$1516.00</td> 
</tr> 
<tr > 
<td>u0607</td> 
<td >9/9/2008</td> 
<td >2 Bdrm. Loft K/Q/Q,3T/SS (9 left)</td> 
<td >6</td> 
<td >11 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0609</td> 
<td >9/27/2008</td> 
<td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0635</td> 
<td >9/17/2008</td> 
<td >Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td> 
<td >4</td> 
<td >10 人</td> 
<td >$399.00</td> 
<td>$1596.00</td> 
</tr> 
<tr > 
<td>u0621</td> 
<td >9/6/2008</td> 
<td >3 Bdrm Townhome (3 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$409.00</td> 
<td>$1636.00</td> 
</tr> 
<tr > 
<td>u0601</td> 
<td >9/24/2008</td> 
<td >3 Bdrm Cabin K/Q+T/2T (1 left)</td> 
<td >5</td> 
<td >9 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0605</td> 
<td >9/25/2008</td> 
<td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0611</td> 
<td >9/28/2008</td> 
<td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0604</td> 
<td >10/6/2008</td> 
<td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$499.00</td> 
<td>$1996.00</td> 
</tr> 
<tr > 
<td>u0617</td> 
<td >9/30/2008</td> 
<td >Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$549.00</td> 
<td>$2196.00</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
玩转方法:call和apply
May 08 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 #Javascript
javascript 触发HTML元素绑定的函数
Sep 11 #Javascript
Js组件的一些写法
Sep 10 #Javascript
编写Js代码要注意的几条规则
Sep 10 #Javascript
jquery之empty()与remove()区别说明
Sep 10 #Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 #Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
You might like
PHP实现多图片上传类实例
2014/07/26 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python自带的IDE在哪里
2020/07/01 Python
keras topN显示,自编写代码案例
2020/07/03 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
企业申诉管理制度
2014/01/30 职场文书
小学毕业感言50字
2014/02/16 职场文书
机关出纳岗位职责
2014/04/03 职场文书
民生工作实施方案
2014/05/31 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Python制作春联的示例代码
2022/01/22 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL