js实现的点击表格th属性 下方的td排序问题
新手提问，感谢大神的解答。 目前的一个table属性下的th表头以及td数据的循环，但是td属性多为汉字的文字串 ， 请问有何办法能实现点击表头，下方相同的文字串集合道一起的排序效果。下方目前情况.
控制器内代码省略
js:
html:
@extends('layout', ['nav' => '招生管理'])
@section('title','学生详细')
@section('content')
<script src="{{ asset('js/script2.js') }}"></script>
{{-- --}}{{--搜索表单,默认为get请求--}}
{{-- <form>--}}
{{-- <input type="text" name="keyword" value="{{Request::input('keyword')}}">--}}
{{-- <span>--}}
{{-- <button type="submit">搜索</button>--}}
{{-- </span>--}}
{{-- </form>--}}
{{--已录入信息,搜索--}}
<style>
.draft {margin-left: 20px;margin-bottom: 5px}
</style>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">已录入信息</h3>
<a href="draft/index"><button type="submit" name="action" value="draft" class="btn btn-xs btn-github draft">我的草稿</button></a>
<form action="" method="get" class="box-tools">
<div class="box-tools">
<div class="input-group input-group-sm hidden-xs" style="width: 750px;">
<input type="text" name="table_search" id="MyInput" placeholder="姓名" onkeydown="if(event.keyCode==13){return false;}" onkeyup="myFunction()" value="{{ request()->get('table_search','') }}" class="form-control pull-right" placeholder="Search">
{{-- <div class="input-group-btn">--}}
{{-- <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>--}}
{{-- </div>--}}
</div>
</div>
</form>
</div>
<div onLoad="goPage(1,10);">
<div class="box-body table-responsive no-padding">
<table id="MyTable" class="table table-hover">
<tr>
<th>学生姓名</th>
<th>联系电话</th>
<th>联系人姓名</th>
<th>联系人称谓</th>
<th>缴费状态</th>
<th>星级</th>
<th>提醒</th>
<th>项目</th>
<th>项目类别</th>
<th>信息录入人</th>
</tr>
@foreach($data as $obj)
<tbody id="adminTbody">
<tr>
<input type="hidden" name="student_id" value="{{ $obj->id }}">
<td>{{ $obj->name }}</td>
<td>{{ $obj->tel }}</td>
<td>{{ $obj->contact_name }}</td>
<td>{{ $obj->contact_relation }}</td>
<td>{{ $obj->get_payment_name($obj->id) }}</td>
<td>{{ $obj->star_lv.'级' }}</td>
<td> @if($obj->notification == '1')
{{ '需要' }}
@elseif($obj->notification == '0')
{{ '不需要' }}
@endif
</td>
<td>{{ $obj->get_projects($obj->id) }}</td>
<td>{{ $obj->get_project_type_name($obj->id) }}</td>
<td>{{ $obj->get_user_name($obj->id) }}</td>
<td>
<a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
<a><button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-danger">
删除</button></a>
<div class="modal modal-danger fade" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">警告</h4>
</div>
<div class="modal-body">
<p>是否确认删除？</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">取消</button>
<a href="{{ $obj->id }}/delete"><button type="button" class="btn btn-outline">确定</button></a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
@endforeach
</table>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="{{ $data->withQueryString()->previousPageUrl() }}"><</a></li>
@for($p = 1; $p <= ceil($data->total() / $data->perpage()); $p++)
<li><a href="{{ $data->withQueryString()->url($p) }}">{{ $p }}</a></li>
@endfor
<li><a href="{{ $data->withQueryString()->nextPageUrl() }}">></a></li>
</ul>
</div> {{-- 此处为paginate分页，貌似需改为js--}}
@endsection
实际显示:
谢谢~！
需要排序的列添加<th class="thsort">缴费状态</th>就行了，帮助到你可以点击采纳支持下哦，谢谢~~
<table id="MyTable" class="table table-hover">
<tr>
<th>学生姓名</th>
<th>联系电话</th>
<th>联系人姓名</th>
<th>联系人称谓</th>
<th class="thsort">缴费状态</th>
<th class="thsort">星级</th>
<th class="thsort">提醒</th>
<th>项目</th>
<th>项目类别</th>
<th>信息录入人</th>
</tr>
<tbody id="adminTbody">
<tr>
<td>学生1</td>
<td>联系电话1</td>
<td>家长1</td>
<td>本人1</td>
<td>尚未录取</td>
<td>1级</td>
<td>需要1</td>
<td>项目1</td>
<td>项目类别1</td>
<td>超级管理员</td>
<td>
<a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
<a>
<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-danger">
删除
</button>
</a>
</td>
</tr>
<tr>
<td>学生2</td>
<td>联系电话2</td>
<td>家长2</td>
<td>本人2</td>
<td>已缴费报名</td>
<td>2级</td>
<td>需要2</td>
<td>项目2</td>
<td>项目类别2</td>
<td>超级管理员</td>
<td>
<a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
<a>
<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-danger">
删除
</button>
</a>
</td>
</tr>
<tr>
<td>学生3</td>
<td>联系电话3</td>
<td>家长3</td>
<td>本人3</td>
<td>尚未录取</td>
<td>3级</td>
<td>需要3</td>
<td>项目3</td>
<td>项目类别3</td>
<td>超级管理员</td>
<td>
<a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
<a>
<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-danger">
删除
</button>
</a>
</td>
</tr>
<tr>
<td>学生4</td>
<td>联系电话4</td>
<td>家长4</td>
<td>本人4</td>
<td>已缴费报名</td>
<td>4级</td>
<td>需要4</td>
<td>项目4</td>
<td>项目类别4</td>
<td>超级管理员</td>
<td>
<a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
<a>
<button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-danger">
删除
</button>
</a>
</td>
</tr>
</tbody>
</table>
<style>.thsort{user-select:none;cursor:pointer}</style>
<script>
function trim(v) { return v.replace(/^\s*|\s*/g, ''); }
function sortByThis(e) {
var cell = this,index = cell.cellIndex, toDesc = cell.getAttribute('sort') == 'asc';
cell.setAttribute('sort', toDesc ? 'desc' : 'asc');
var adminTbody = document.getElementById('adminTbody'), tds = Array.from(adminTbody.querySelectorAll('tr td:nth-child(' + (index + 1) + ')'));
tds.sort((a, b) => {
return trim((toDesc ? b : a).innerText).localeCompare(trim((toDesc ? a : b).innerText))
});
for (var td of tds) {
adminTbody.appendChild(td.parentNode);
}
}
document.querySelectorAll('#MyTable .thsort').forEach(th => { th.onclick = sortByThis })
</script>
有何办法能实现点击表头，下方相同的文字串集合道一起的排序效果？你指的是按字段排序吗？
如果连不同页码的数据一起排序，可以做成新的数据请求，点击特定th，提交这个th的索引，接口按索引对特定的字段排序即可
如果仅仅是本页内的排序，可以把tr弄到一个数组中，然后还是根据th索引，对特定td值排序，然后重新添加到表格渲染
首先你需要用js获取data数组
然后你需要对data进行排序，可以重写js中的sort方法。
然后需要重新渲染页面
后台数据排序好 ajax请求获取 重新添加到th里面
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632