Попробуйте это:
var table;
$(document).ready(function () {
table = $('#tablePassword).DataTable();
});
$('body').on('click', '#btnGet', function () {
//to get currently clicked row object
var row = $(this).parents('tr')[0];
//to get currently clicked row data
var rowData = table.row(row).data();
//to get currently clicked row id (first column value (at index [0])
var rowId = rowData[0];
});
Чтобы опубликовать дополнительные параметры в jQuery DataTables, используйте метод fnServerData помимо ajaxSource, как показано ниже (не забудьте использовать те же имена параметров в методе Controller):
// code omitted for brevity
"serverSide": true,
"ajaxSource": "/Password/AjaxGetJsonData",
//fnServerData used to inject the parameters into the AJAX call sent to the server-side
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "all", "value": true });
$.getJSON(sSource, aoData, function (json) {
fnCallback(json)
});
},
Обновление:
Пожалуйста, не забудьте использовать те же имена параметров в методе Controller. Вы также можете использовать следующий подход для получения значений строк из DataTable:
var row = $(this).closest("tr"), // Finds the closest row <tr>
rowId = row.find("td:nth-child(1)").text(); // Finds the 1st <td> element (Id)
Вот части контроллера и модели для этого решения:
Контроллер:
/// <summary>
/// Returns data by the criterion
/// </summary>
/// <param name="param">Request sent by DataTables plugin</param>
/// <returns>JSON text used to display data
/// <list type="">
/// <item>sEcho - same value as in the input parameter</item>
/// <item>iTotalRecords - Total number of unfiltered data. This value is used in the message:
/// "Showing *start* to *end* of *iTotalDisplayRecords* entries (filtered from *iTotalDisplayRecords* total entries)
/// </item>
/// <item>iTotalDisplayRecords - Total number of filtered data. This value is used in the message:
/// "Showing *start* to *end* of *iTotalDisplayRecords* entries (filtered from *iTotalDisplayRecords* total entries)
/// </item>
/// <item>aoData - Twodimensional array of values that will be displayed in table.
/// Number of columns must match the number of columns in table and number of rows is equal to the number of records that should be displayed in the table</item>
/// </list>
/// </returns>
[Authorize(Roles = "CanViewLab")]
public ActionResult GetLabs(JQueryDataTableParamModel param, bool isAll)
{
var allRecords = repository.Labs; //All records
if (!isAll)
{
allRecords = allRecords.Where(m => m.StatusId == Status.Active); //Only active records
};
IEnumerable<Lab> filteredRecords;
//Check whether the users should be filtered by keyword
if (!string.IsNullOrEmpty(param.sSearch))
{
//Used if particulare columns are filtered
var nameFilter = Convert.ToString(Request["sSearch_1"]);
var placeFilter = Convert.ToString(Request["sSearch_2"]);
//Optionally check whether the columns are searchable at all
var isNameSearchable = Convert.ToBoolean(Request["bSearchable_1"]);
var isPlaceSearchable = Convert.ToBoolean(Request["bSearchable_2"]);
//filteredRecords = repository.Labs
filteredRecords = allRecords //For including "isAll" parameter to the "filteredRecords" as "allRecords" parameter
.Where(c => isNameSearchable && c.Name.ToLower().Contains(param.sSearch.ToLower())
||
isPlaceSearchable && c.Place.ToLower().Contains(param.sSearch.ToLower()));
}
else
{
filteredRecords = allRecords;
}
//!!! The number of request variables (bSortable_X) is equal to the iColumns variable.
var isNameSortable = Convert.ToBoolean(Request["bSortable_1"]);
var isCodeSortable = Convert.ToBoolean(Request["bSortable_2"]);
var isStatusNameSortable = Convert.ToBoolean(Request["bSortable_3"]);
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
Func<Lab, string> orderingFunction = (c => sortColumnIndex == 1 && isNameSortable ? c.Name :
sortColumnIndex == 2 && isCodeSortable ? c.Place :
sortColumnIndex == 3 && isStatusNameSortable ? c.StatusName :
"");
var sortDirection = Request["sSortDir_0"]; // asc or desc
if (sortDirection == "asc")
filteredRecords = filteredRecords.OrderBy(orderingFunction);
else
filteredRecords = filteredRecords.OrderByDescending(orderingFunction);
var displayedRecords = filteredRecords.Skip(param.iDisplayStart).Take(param.iDisplayLength);
var result = from c in displayedRecords select new[] { Convert.ToString(c.Id), c.Name, c.Place, c.StatusName };
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = allRecords.Count(),
iTotalDisplayRecords = filteredRecords.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
1025 *
*
Модель:
/// <summary>
/// Class that encapsulates most common parameters sent by DataTables plugin
/// </summary>
public class JQueryDataTableParamModel
{
/// <summary>
/// Request sequence number sent by DataTable, same value must be returned in response
/// </summary>
public string sEcho{ get; set; }
/// <summary>
/// Text used for filtering
/// </summary>
public string sSearch{ get; set; }
/// <summary>
/// Number of records that should be shown in table
/// </summary>
public int iDisplayLength{ get; set; }
/// <summary>
/// First record that should be shown(used for paging)
/// </summary>
public int iDisplayStart{ get; set; }
/// <summary>
/// Number of columns in table
/// </summary>
public int iColumns{ get; set; }
/// <summary>
/// Number of columns that are used in sorting
/// </summary>
public int iSortingCols{ get; set; }
/// <summary>
/// Comma separated list of column names
/// </summary>
public string sColumns{ get; set; }
}
А вот как я получаю и перечисляю данные:
Вид:
<div class="portlet-body form">
<div class="form-body">
<table id="dtbLab" class="table table-striped table-bordered table-hover table-checkable order-column">
<thead>
<tr>
<th> Id </th>
<th> Name </th>
<th> Place </th>
<th> Status </th>
<!-- (!!! "columnDefs" width SHOULD BE set up in <th> section of column header) -->
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
var table;
$(document).ready(function () {
table = $('#dtbLab')
.DataTable({
tableTools: {
"sRowSelect": "single",
"aButtons": []
},
buttons: [],
"autoWidth": false,
"serverSide": true,
"ajaxSource": "/Lab/GetLabs",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "isAll", "value": isAllChecked }); // Add some extra data to the sender
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"processing": false, //Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort)
"columns": [
{
"name": "Id",
"width": '5%', /* '5px' */
"searchable": false,
"sortable": false,
"fnRender": function (oObj) {
return '<a href=\"Controller/Action/' + oObj.aData[0] + '\">View</a>';
}
},
{ "name": "Name", "width": '45%' },
{ "name": "Code", "width": '45%' },
{ "name": "Status", "width": '10%' }
]
});
});
</script>
Надеюсь, это поможет ...