Question

我正在使用DataTables更改分页栏的默认外观。我已经能够插入上一个/下一个按钮的图像，但是对于实际的页码，我想做下面的事情。

这是我迄今为止所取得的成就

我正在尝试将页码1和2更改为略高于分页栏的文本。不知道怎么做。

这是我的Jquery

$(document).ready(function() {
    $('#esignTable').DataTable({"pageLength":5, "pagingType":"full_numbers", "sDom": '<"top"flp>rt<"bottom"i><"clear">', "oLanguage": { 
        "sEmptyTable": " ", 
        "oPaginate": {
               "sNext": '<img src="../images/integration/SlowRight.jpg">',
               "sPrevious": '<img src="../images/integration/SlowLeft.jpg">',
               "sFirst": '<img src="../images/integration/FastLeft.jpg">',
               "sLast": '<img src="../images/integration/FastRight.jpg">',
             }
           }
    });
});

Answer 1

您可以使用input pagination plugin。这是一个例子

var table = $('#example').DataTable({
  pagingType: 'input',
  pageLength: 5,
  language: {
    oPaginate: {
       sNext: '<i class="fa fa-forward"></i>',
       sPrevious: '<i class="fa fa-backward"></i>',
       sFirst: '<i class="fa fa-step-backward"></i>',
       sLast: '<i class="fa fa-step-forward"></i>'
    }
  }   
})

演示 - ＆gt;的 http://jsfiddle.net/s19r61z7/

简单地将https://cdn.datatables.net/plug-ins/1.10.15/pagination/input.js包含在小提琴中。

使用Font Awesome而不是图像，但这只是一个选择（没有任何图像）。这包括http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

可以通过简单的CSS进行进一步的控制，比如

.dataTables_paginate input { width: 40px; }

结果如下所示

Answer 2

直到我在datatables.net上看到您的帖子之后才看到这个，但无论如何，下面的示例工作正常，您可以在http://jsbin.com/rireyog/edit?js,output看到它

如果您将我的回调处理程序复制到您的代码中，它应该让您接近您想要到达的位置。

回调更新附加的跨度然后总是返回＆＃34;＆＃34;清除实际的信息块。

如果你不赶时间，可能会想出一个更好看的使用bootstrap和fontawsome而不是图标。

<GridViewColumn Width="115" Header="Format">
    <GridViewColumn.CellTemplate>                                    
        <DataTemplate>
            <TextBlock 
                    x:Name="textBlock"
                    Text="{Binding FileFormat}"
                    Margin="0,0,0,0">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Gray"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding BadCheckSumExist}" Value="True">
                    <Setter TargetName="textBlock" Property="Foreground" Value="Silver"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

如何更改分页栏中DataTables中的Page＃？

2 个答案: