jquery datatables actionlink

Question

जोड़ने के लिए कैसे मैं पिछले कुछ घंटों की खोज कर रहा हूं, और दुर्भाग्यवश मुझे एक एडिट एडिट के साथ डेटाटेबल को पॉप्युलेट करने और .NET और MVC का उपयोग करके लिंक कॉलम हटाने का उदाहरण नहीं मिल रहा है।

यहां मेरे पास अभी तक है, मैं एक एक्शन लिंक कैसे जोड़ूं? मैं क्या खो रहा हूँ?

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myDataTable').dataTable({ 
     bProcessing: true, 
     sAjaxSource: '@Url.Action("Index1", "Default1")' 
    }); 

}); 
</script> 

<div id="container"> 
<div id="demo"> 
    <table id="myDataTable"> 
     <thead> 
      <tr> 
       <th> 
        RoleId 
       </th> 
       <th> 
        RoleName 
       </th> 
       <th> 
        UserId 
       </th> 
       <th> 
        UserName 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
</table>  
</div> 
</div> 

मैं इसे अंतिम कॉलम में जोड़ना चाहता हूं;

<td> 
     @Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) | 
     @Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) | 
     @Html.ActionLink("Delete", "Delete", new { id=item.PrimaryKey }) 
    </td> 

लेकिन यह नहीं पता कि इसे कैसे किया जाए।

Answer 1

आप कस्टम कॉलम जोड़ने के लिए fnRender फ़ंक्शन के साथ aoColumns संपत्ति का उपयोग कर सकते हैं। आप Html.ActionLink सहायक का उपयोग नहीं कर सकते हैं क्योंकि आपको जावास्क्रिप्ट से गतिशील रूप से लिंक उत्पन्न करना होगा। aoColumns प्रॉपर्टी आपको प्रत्येक कॉलम को कॉन्फ़िगर करने में मदद करती है, अगर आप किसी विशेष कॉलम को कॉन्फ़िगर नहीं करना चाहते हैं तो बस null पास करें और आपको object({}) पास करना होगा।

fnRender फ़ंक्शन आपको अन्य कॉलम के मानों का उपयोग करके लिंक बनाने में मदद करता है। लिंक बनाने के लिए id जैसे अन्य कॉलम के मान प्राप्त करने के लिए आप oObj.aData का उपयोग कर सकते हैं।

<script type="text/javascript">  
    $(document).ready(function() { 
     $('#myDataTable').dataTable({ 
      bProcessing: true,   
      sAjaxSource: '@Url.Action("Index1", "Default1")', 
      aoColumns: [ 
         null, // first column (RoleId) 
         null, // second column (RoleName) 
         null, // third (UserId) 
         null, // fourth (UserName) 

         {  // fifth column (Edit link) 
         "sName": "RoleId", 
         "bSearchable": false, 
         "bSortable": false, 
         "fnRender": function (oObj)        
         { 
          // oObj.aData[0] returns the RoleId 
          return "<a href='/Edit?id=" 
           + oObj.aData[0] + "'>Edit</a>"; 
         } 
         }, 

         { }, // repeat the samething for the details link 

         { } // repeat the samething for the delete link as well 

        ] 
    }); 
}); 
</script> 

JSON उत्पादन में एक अन्य महत्वपूर्ण बात आप सर्वर से लौटने के लिए, संपादित करें स्तंभ के लिए भी आप 1, 2, 3 या कुछ भी की तरह कुछ भी वापस लौटाना होगा।

संदर्भ: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

Answer 2

fnRender मूल्यह्रास किया गया है और mRender समान पैरामीटर प्राप्त नहीं करता है।

{  // fifth column (Edit link) 
    "sName": "RoleId", 
    "bSearchable": false, 
    "bSortable": false, 
    "mRender": function (data, type, full) { 
     var id = full[0]; //row id in the first column 
     return "<a href='javascript:alert("+id+");'>Edit</a>"; 
    } 

Answer 3

aoColumnDefs

$('#myDataTable').dataTable({ 
    bProcessing: true, 
    sAjaxSource: '@Url.Action("Index1", "Default1")' 
    aoColumnDefs: [{ 
        "aTargets": [4], //Edit column 
        "mData": "RoleId", //Get value from RoleId column, I assumed you used "RoleId" as the name for RoleId in your JSON, in my case, I didn't assigned any name in code behind so i used "mData": "0" 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Edit", "Default1")?RoleId=' + data + 
          '>Edit</a>'; 
        } 
        },{ 
        "aTargets": [5], //Detail column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Detail", "Default1")?RoleId=' + data + 
          '>Detail</a>'; 
        } 
        },{ 
        "aTargets": [6], //Delete column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Delete", "Default1")?RoleId=' + data + 
          '>Delete</a>'; 
        } 
        }] 
}); 

Answer 4

अन्य प्रतिक्रियाओं विरासत DataTables सिंटैक्स का उपयोग कर रहे हैं के साथ एक और दृष्टिकोण:

यह मेरे लिए काम करता है, @Mark उदाहरण का पालन करें।

$('#MyDataTable').DataTable({ 
    "processing": true, 
    "ajax": '@Url.Action("Index1", "Default1")', 
    "columnDefs": [ 
     {"targets": [4], "data": "RoleId", "render" : function(data, type, full) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", data);}}, 
     {}, //repeat 
     {} //repeat 
    ] 
}); 

ध्यान दें:: आदेश ActionLink में मॉडल पाने के लिए, मैं स्ट्रिंग data साथ "की जगह" है, जो परिभाषित किया गया है को बदलने के लिए JavaScript replace() उपयोग कर रहा हूँ DataTables 1.10+ के लिए, columnDefs के लिए वाक्य रचना इस प्रकार है कॉलमडिफ

Answer 5

में मैंने "रोलआईडी" के रूप में डेटाटाइबल 1.10+ के लिए कोड का उल्लेख किया है लेकिन लिंक के बजाय डेटाटेबल सेल में स्ट्रिंग प्राप्त करें।

@Html.ActionLink("Edit", "Edit", new {id = "294"}) 

ध्यान दें कि समाधान यहाँ पर मेरी जावास्क्रिप्ट का उपयोग करने और पुराने mvc3 संस्करण:

$(document).ready(function() { 

var tenantid = $('#tenantid').text(); 
$("#title").html("<h1>User List for TenantID: "+ tenantid + " </h1>"); 

var oTable = $('#list').DataTable({ 
    "serverSide": true, 
    "ajax": { 
     "type": "POST", 
     "url": '/User/DataHandler', 
     "contentType": 'application/json; charset=utf-8', 
     'data': function (data) 
     { 
      data.ID = tenantid; 
      return data = JSON.stringify(data); 
     } 
    }, 
    "dom": 'lfrtiSp',   
    "processing": true, 
    "paging": true, 
    "deferRender": true,   
    "pageLength": 10, 
    "lengthMenu": [5, 10, 25, 50, 75, 100], 
    "columnDefs": [ 
     { "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", row.UserID); } } 

    ], 

    "columns": [ 
     { "data": "UserID", "orderable": true }, 
     { "data": "UserGUID", "orderable": false }, 
     { "data": "UserName", "orderable": true }, 
     { "data": "UserEMAil", "orderable": true }, 
     { "data": "UserIsDeleted", "orderable": true }, 
     { "data": "Action", "orderable": false } 
    ], 

    "order": [0, "asc"] 

    }); 
}); 

Answer 6

मैं एक और तरीका यह actionlink पाने के लिए मिल गया इस post (ओलिवर टिप्पणियाँ) से मदद का उपयोग कर काम करता है:

आप तालिका नोड में डेटा टैग विशेषताएँ जोड़ते हैं जिन्हें आप जावास्क्रिप्ट

में cshtml में पुन: उपयोग करते हैं:

<table class="table table-striped display" id="list" 
      data-url-edit="@Url.Action("Edit","User", new { id = "replace"})" 

चौथाई columndefs क्षेत्र में अपने * .js फ़ाइल में:

"columnDefs": [ 
     { 
      "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { 
       return '<a href="' + $('#list').data('url-edit').replace("replace", row.UserID) + '">Edit</a> | ' 
        + '<a href="' + $('#list').data('url-details').replace("replace", row.UserID) + '">Details</a> | '