Jquery datatables 数据绑定方式

一、普通绑定方式：

    <script type="text/javascript">  
            $(document).ready(function() {  
                $('#example').dataTable();  
               $("#txtFeedkey").keyup(function () {
                $("#main_table tbody tr")
                          .hide()
                          .filter(":contains('" + ($(this).val()) + "')")
                          .show();
            }).keyup();
            });  
        </script>  

 <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%" class="table">  
       <thead>  
                <tr>  
                     <th width="20%">First name</th>  
                     <th width="20%">Last name</th>  
                     <th width="35%">City</th>  
                     <th width="25%">Date</th>  
               </tr>  
       </thead>  
</table>  

二、Ajax 方式绑定

function BindData(){
<pre name="code" class="javascript">    var table = $("#tbTicketList").DataTable({
             "processing": true,
              "bAutoWidth": true,
             "bPaginate": true,
             "aaSorting": [[0, "asc"]],
             "sZeroRecords": "No records...",
            "bDestroy":true,
            "ajax": "/Data/GetOverallRate?start_date=" + $("input[name='txt_from_date']").val() + "&end_date=" + $("input[name='txt_to_date']").val(),
            "columns": [
                { "data": "ActionType" },
                { "data": "SucceedCount" },
                { "data": "TotalCount" },
                { "data": "SucceedRate" }
            ]
        });

}

<table cellpadding="0" cellspacing="0" border="0" class="display" id="HelpdeskOverview">
    <thead>
        <tr>
            <th>User</th>
            <th>Drink</th>
            <th>District</th>
        </tr>
    </thead>
</table>

后台返回的json字符串格式要求：
{
"draw": 2,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Airi",
"Satou",
"Accountant",
"Tokyo",
"2008/11/28",
162700
],
[
"Angelica",
"Ramos",
"Chief Executive Officer (CEO)",
"London",
"2009/10/09",
1200000
]
]
}

get 请求重新加载数据：（刷新）

unction RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    
    table.fnClearTable(this);//动态刷新关键部分语句，只会根据后台数据有变化才会刷新

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

post 请求重新加载数据：（刷新）

function RefreshTable(tableId, urlData)
{
    var ss=new Array;
    var temp=new Array;
    $.post(urlData, '{"msgid":"3001","aid":"1002","count":"50"}',function(data)
    {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    table.fnClearTable(this);
       for(var j=0;j<data.values.length;j++)
       {
        var petname=data.values[j].petname;
        var did=data.values[j].did;
        var aid=data.values[j].aid;
        ss=[petname,did,aid];
        temp.push(ss);
        //table.fnAddData(ss);
        //var dt={"aaData":['petname':''+petname+'','did':''+did+'','aid':''+aid+'']};
        table.oApi._fnAddData(oSettings, ss);
       }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    }, "json");
}