Javascript 排序不'；不能在jQuery数据表中工作_Javascript_Jquery_Datatables

Javascript 排序不'；不能在jQuery数据表中工作

javascript jquery datatables

Javascript 排序不'；不能在jQuery数据表中工作,javascript,jquery,datatables,Javascript,Jquery,Datatables,我想实施订购，但它不起作用你能告诉我原因吗？我需要更改什么才能使其正常工作，以便按顺序显示我的数据 <%@ 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

我想实施订购，但它不起作用

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

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


使用数据表的Spring分页
//获取页面数据的插件
jQuery.fn.dataTableExt.oApi.fnPagingInfo=函数（oSettings）
{
返回{
“iStart”：oSettings._i显示开始，
“iEnd”：oSettings.fnDisplayEnd（），
“i长度”：o设置。i显示长度，
“iTotal”：oSettings.fnRecordsTotal（），
“iFilteredTotal”：oSettings.fnRecordsDisplay（），
“iPage”：oSettings._i显示长度==-1？
0:Math.ceil（oSettings.\u iDisplayStart/oSettings.\u iDisplayLength），
“iTotalPages”：oSettings._i显示长度==-1？
0:Math.ceil（oSettings.fnRecordsDisplay（）/oSettings.\u iDisplayLength）
};
};
$（文档）.ready（函数（）{
变量表=$（“#表”）。数据表（{
“bProcessing”：正确，
“bServerSide”：正确，
“sPaginationType”：“完整编号”，
“滚动”：“120px”，
“卷轴崩溃”：没错，
“订单”：[[3，“说明”]，
“语言”：{
“oPaginate”：{
“sNext”：“>”，
“sLast”：“»”，
“sFirst”：“laquo”，
“以前的”：“<”
}
},
“排序”：“位置”，
//bStateSave变量可用于保存客户端cookie上的状态：设置值“true”
“bStateSave”：false，
//默认值：页面显示长度
“iDisplayLength”：10，
//我们将使用以下变量跟踪服务器端的页码（有关更多信息，请访问：http://legacy.datatables.net/usage/options#iDisplayStart)
“iDisplayStart”：0，
“fnDrawCallback”：函数（）{
$（'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'）；}）；}）；
//获取客户端上的页码。请注意：页码从0开始
//对于第一页，您将看到0第二页1第三页2。。。
//警报（“当前页码：”+（（this.fnPagingInfo（）.iPage）+1））；
},         
“sAjaxSource”：“${pageContext.request.contextPath}/EmployeeData”，
“aoColumns”：[
{“mData”：“firstName”}，
{“mData”：“lastName”}，
{“mData”：“emp_Id”}，
{“mData”：“email_ID”}，
{“mData”：“电话号码”}，
{“mData”：“城市”}，
{“mData”：“编辑”，
呈现：函数（数据、类型、行）{
返回“”；
},
}, 
{“mData”：“视图”，
呈现：函数（数据、类型、行）{
返回“”；
},
}, 
{“mData”：“删除”，
呈现：函数（数据、类型、行）{
/*返回“”*/
/*返回*/
返回“”；
/*返回“删除”*/
/*返回“”*/
},
}, 
]     
}   
);
} );
函数deleteEmp（emp_Id）{
if（确认（“是否确实要删除此ID:+emp_ID））{
window.location=“${pageContext.request.contextPath}/deletemp？emp_Id=“+emp_Id；
}
否则{
返回false；
}
}
#桌子{
对齐：居中；
}
#btn{
文字装饰：无；
}
#h{
文本对齐：居中；
颜色：蓝色；
}
#链接3{
浮动：对；
右边距：5px；
} 
#链接4{
浮动：对；
} 
#brk{
高度：10px；
}
.数据表{
背景色：#ddd！重要；
}
员工详细信息


名字
姓氏
emp_Id
电子邮件地址
电话号码
城市
编辑
看法
删除

原因

您使用

“bServerSide”：true启用了服务器端处理。在此模式下，搜索、筛选和分页应在服务器端完成
很可能您的服务器端脚本（${pageContext.request.contextPath}/EmployeeData
）没有编程来执行此操作，这就是为什么您看不到排序/筛选/分页工作的原因
有关处理模式的更多信息，请参阅
解决方案
删除“bServerSide”：true
以启用客户端处理
或者，如果您有一个大的数据集，您可以考虑在服务器上基于实现排序/过滤。
请给我解决方案如何在服务器端实现这一点我对这个概念不熟悉。