weixin_58648225 2021-06-03 14:46 采纳率: 89.2%
浏览 187
已采纳

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">&times;</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

实际显示:

 

谢谢~!

  • 写回答

6条回答 默认 最新

  • CSDN专家-showbo 2021-06-03 16:11
    关注

    需要排序的列添加<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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥500 把面具戴到人脸上,请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。
  • ¥15 各位 帮我看看如何写代码,打出来的图形要和如下图呈现的一样,急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题,请各位专家解答!
  • ¥30 vue+element根据数据循环生成多个table,如何实现最后一列 平均分合并
  • ¥20 pcf8563时钟芯片不启振
  • ¥20 pip2.40更新pip2.43时报错