个人中心
gpt4 book ai didi

javascript - 排序在 jQuery DataTables 中不起作用

转载 作者：行者123 更新时间：2023-11-27 23:47:20 27 4
gpt4 key购买 nike

我想实现排序，但它不起作用。

能告诉我原因吗？我需要更改什么才能使其正常工作以便我的数据按顺序显示？

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Spring pagination using data tables</title>
     <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> -->
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">
        //Plug-in to fetch page data 
        jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        {
            return {
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          oSettings._iDisplayLength === -1 ?
                    0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    oSettings._iDisplayLength === -1 ?
                    0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            };
        };

    $(document).ready(function() {
        var table=$("#table").DataTable( {

             "bProcessing": true, 
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            "scrollY":"120px", 
            "scrollCollapse": true,
            "order": [[ 3, "desc" ]],
            "oLanguage": {
                "oPaginate": {
                     "sNext": '&gt',
                     "sLast": '&raquo',
                     "sFirst": '&laquo',
                     "sPrevious": '&lt'
                }
              },
             "sort": "position", 
            //bStateSave variable you can use to save state on client cookies: set value "true" 
            "bStateSave": false,
            //Default: Page display length
            "iDisplayLength": 10,
            //We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
            "iDisplayStart": 0,
            "fnDrawCallback": function () {
                $('table #table td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatable');}); });
                $('table #table td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatable');}); });
                //Get page numer on client. Please note: number start from 0 So
                //for the first page you will see 0 second page 1 third page 2...
                //alert("Current page number: "+((this.fnPagingInfo().iPage)+1));    
            },         
            "sAjaxSource": "${pageContext.request.contextPath}/EmployeeData",
            "aoColumns": [
                { "mData": "firstName" },
                { "mData": "lastName" },
                { "mData": "emp_Id" },                  
                { "mData": "email_ID" },
                { "mData": "phone_No" },
                { "mData": "city" },     
                { "mData": "Edit",
                    render:function(data ,type,row){
                        return '<a href="${pageContext.request.contextPath}/editEmp?emp_Id='+row.emp_Id+' &isEdit=true">Edit</a>';
                    },
                    }, 
                { "mData": "View",
                        render:function(data ,type,row){
                            return '<a href="${pageContext.request.contextPath}/viewEmp?emp_Id='+row.emp_Id+'&isView=true">View</a>';
                        },
                        }, 

                { "mData": "Delete",
                    render:function(data ,type,row){
                         /* return '<button><a id="btn" href="${pageContext.request.contextPath}/delete?emp_Id='+row.emp_Id+'">Delete</a></button>'; */
                       /*  return <a href="#" class="delete_Id">Delete</a>    */
                          return '<a href="#" onclick="return deleteEmp('+row.emp_Id+')">Delete</a>'; 

                        /*  return '<button id="delete_Id" empId='+row.emp_Id+'>Delete</button>';  */
                        /*  return '<a href="#" id="delete_Id">Delete</a>';  */
                    },
                        }, 
            ]     
        }   
        );
    } );
      function deleteEmp(emp_Id){
          if(confirm("are you sure want to delete this ID : "+emp_Id)){
              window.location = "${pageContext.request.contextPath}/deleteEmp?emp_Id="+emp_Id;
          }
          else{
              return false;
          }
      }

    </script>
    <style>
    #table{
      align:center;
    }
    #btn{
         text-decoration:none; 
    }
    #h{
      text-align:center;
      color:blue;
    }
     #link3{
       float:right;
       margin-right:5px;
    } 
     #link4{
      float:right;

    } 
    #brk{
       height: 10px;
    }
    .datatable{
        background-color: #ddd !important;
    }
    </style>
    </head>
    <body>
    <form:form action="" method="GET">
    <h2 id="h" >Employee Details<br><br></h2>

                        <div>
                            <a href="${pageContext.request.contextPath}/createEmp">Add New Employee</a>

                            <a id="link4" href="${pageContext.request.contextPath}/bulkExport">EmployeeBulkExport</a>
                            <a id="link3" href="${pageContext.request.contextPath}/fileUploadForm">EmployeeImport  </a>
                        </div>
                     <div id = "brk"></div> 
    <table width="100%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td>
        <table id="table" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>firstName</th>
                    <th>lastName</th>
                    <th>emp_Id</th>
                    <th>email_Id</th>
                    <th>phone_No</th>
                    <th>City</th>
                    <th>Edit</th>
                    <th>View</th>
                    <th>Delete</th>             
                </tr>
            </thead>       
        </table>
        </td></tr></table>
    </form:form>
    </body>
    </html>

最佳答案

CAUSE

您已使用 "bServerSide": true 启用服务器端处理。在这种模式下，搜索、过滤和分页应该在服务器端完成。

很可能您的服务器端脚本 (${pageContext.request.contextPath}/EmployeeData) 没有被编程为这样做，这就是为什么您看不到排序/过滤/分页工作.

参见manual有关处理模式的更多信息。

SOLUTION

删除 "bServerSide": true 以启用客户端处理。

或者，如果您有一个大型数据集，您可以考虑基于supplied parameters在服务器上实现排序/过滤。 .

关于javascript - 排序在 jQuery DataTables 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33029617/

27 4 0
文章推荐： javascript - 主干 View 中的 Div id 持久性
文章推荐： c++ - 使用 reinterpret_cast 将文件读入结构
文章推荐： html - Bootstrap Content Spills over Width of Navbar on Mobile -- 学术 session 网站
文章推荐： javascript - ms crm 2015 中获取当前控制的替代方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com