Question

我有一个简单的html表，我需要使用jQuery应用排序和滑动功能。我已经使用DataTable.js jQuery库应用了排序。排序工作正常，但不知道如何将滑块应用到表格，如下所示，使滑块中的所有主题列和学生姓名和总列数固定

enter image description here

有人可以告诉我一些解决方案吗？

我的代码如下所示

脚本

$(document).ready(function () {
    myTable= $('#myTable').dataTable({
            "bInfo": false,
            "bLengthChange": false,
            "bPaginate": false
    });
});

HTML

<table id="myTable" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Student</th>
            <th>Maths</th>
            <th>Physics</th>
            <th>Geography</th>
            <th>History</th>
            <th>English</th>
            <th>Computer</th>
            <th>Biology</th>
            <th>Chemistry</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jeffrey</td>
            <td>55</td>
            <td>22</td>
            <td>66</td>
            <td>32</td>
            <td>34</td>
            <td>56</td>
            <td>67</td>
            <td>85</td>
            <td>445</td>
        </tr>
        <tr>
            <td>Mathew</td>
            <td>32</td>
            <td>43</td>
            <td>45</td>
            <td>76</td>
            <td>78</td>
            <td>98</td>
            <td>87</td>
            <td>77</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Linson</td>
            <td>23</td>
            <td>87</td>
            <td>87</td>
            <td>98</td>
            <td>97</td>
            <td>86</td>
            <td>75</td>
            <td>75</td>
            <td>454</td>
        </tr>
        <tr>
            <td>Filson</td>
            <td>45</td>
            <td>76</td>
            <td>87</td>
            <td>77</td>
            <td>88</td>
            <td>55</td>
            <td>78</td>
            <td>98</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Felix</td>
            <td>87</td>
            <td>90</td>
            <td>90</td>
            <td>89</td>
            <td>97</td>
            <td>96</td>
            <td>70</td>
            <td>86</td>
            <td>565</td>
        </tr>
        <tr>
            <td>Akhil</td>
            <td>78</td>
            <td>98</td>
            <td>65</td>
            <td>65</td>
            <td>67</td>
            <td>56</td>
            <td>87</td>
            <td>90</td>
            <td>676</td>
        </tr>
        <tr>
            <td>Arjun</td>
            <td>67</td>
            <td>88</td>
            <td>77</td>
            <td>66</td>
            <td>55</td>
            <td>44</td>
            <td>45</td>
            <td>45</td>
            <td>788</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>57</td>
            <td>87</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
            <td>99</td>
            <td>77</td>
            <td>898</td>
        </tr>
    </tbody>
</table>

Answer 1

修复了标题插件可以帮助您解决此问题。您可以在example here中看到固定标题。

updated JSFiddle example

Answer 2

https://datatables.net/examples/basic_init/scroll_x.html

将scrollX添加到您的dataTable

     $(document).ready(function() {
       $('#example').dataTable( {
         "scrollX": true
       } );
     } );

html表的滑块功能

2 个答案: