排序在jQuery DataTables中不起作用

Question

I want to implement ordering but it is not working. 我想实施订购，但无法正常工作。

Can you tell me the reason why? 你能告诉我原因吗？ What do I need to change to make it work so that my data is displayed in order? 我需要更改什么才能使其正常工作，以便按顺序显示我的数据？

    <%@ 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>

Answer 1

CAUSE 原因

You have server-side processing enabled with "bServerSide": true . 您已通过"bServerSide": true启用了服务器端处理。 In this mode searching, filtering and pagination should be done on the server-side. 在这种模式下，搜索，过滤和分页应在服务器端进行。

Most likely your server-side script ( ${pageContext.request.contextPath}/EmployeeData ) isn't programmed to do so, that's why you don't see ordering/filtering/pagination working. 您的服务器端脚本（ ${pageContext.request.contextPath}/EmployeeData ）很可能没有编程为这样做，这就是为什么看不到排序/过滤/分页的原因。

See manual for more information on processing modes. 有关处理模式的更多信息，请参见手册。

SOLUTION 解

Remove "bServerSide": true to enable client-side processing. 删除"bServerSide": true以启用客户端处理。

Alternatively, if you have a large dataset you may look into implementing ordering/filtering on the server based on supplied parameters . 另外，如果您的数据集很大，则可以考虑根据提供的参数在服务器上实现排序/过滤。

排序在jQuery DataTables中不起作用

问题描述

1 个解决方案

解决方案1
1 2015-10-09 17:57:12

排序在jQuery DataTables中不起作用

问题描述

1 个解决方案

解决方案1 1 2015-10-09 17:57:12

解决方案1
1 2015-10-09 17:57:12